/* Shared base styles for legal/docs/dashboard pages (Margine landing). */

body {
  background-color: #0A0A0A;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  background-attachment: fixed;
  min-height: 100dvh;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.025;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; }

.skip-link {
  position: absolute; top: -100px; left: 0;
  background: #10b981; color: #0A0A0A;
  padding: 12px 20px; z-index: 100;
  font-weight: 700; text-transform: uppercase;
  font-size: 12px; letter-spacing: 0.1em;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

.legal-content h2 { margin-top: 48px; margin-bottom: 16px; color: white; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { margin-top: 32px; margin-bottom: 12px; color: white; }
.legal-content p { margin-bottom: 16px; color: #d1d1d1; }
.legal-content ul { list-style: none; margin-bottom: 16px; padding-left: 0; }
.legal-content ul li { color: #d1d1d1; padding-left: 20px; position: relative; margin-bottom: 8px; }
.legal-content ul li::before { content: "—"; position: absolute; left: 0; color: #10b981; }
.legal-content a { color: #10b981; text-decoration: underline; text-underline-offset: 2px; }
.legal-content a:hover { color: #4edea3; }
.legal-content strong { color: white; font-weight: 600; }
.legal-content code {
  font-family: "JetBrains Mono", monospace; font-size: 13px;
  background: #1a1a1a; border: 1px solid #262626;
  padding: 2px 6px; color: #10b981;
}

/* 404 page — targeted styles so it doesn't depend on Tailwind utilities
   that may not be in the compiled bundle. */
.notfound-main {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}
.notfound-card { width: 100%; max-width: 28rem; }
.notfound-brand { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 48px; }
.notfound-brand .label {
  color: #fff; font-weight: 700; font-size: 18px; letter-spacing: -0.05em;
  border-bottom: 2px solid #10b981; transition: border-color 0.15s ease;
}
.notfound-brand:hover .label { border-bottom-color: #fff; }
.notfound-tag {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: #ef4444; margin-bottom: 12px;
}
.notfound-number {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700; line-height: 1; color: #fff;
  font-size: 88px; margin-bottom: 24px;
}
@media (min-width: 640px) { .notfound-number { font-size: 120px; } }
.notfound-headline { color: #fff; font-size: 18px; font-weight: 500; margin-bottom: 8px; }
.notfound-body { color: #a3a3a3; font-size: 14px; line-height: 1.625; margin-bottom: 32px; max-width: 65ch; }
.notfound-path {
  border: 1px solid #262626; background: rgba(23, 23, 23, 0.5);
  padding: 8px 12px; margin-bottom: 32px;
}
.notfound-path .label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: #737373; margin-bottom: 4px;
}
.notfound-path code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px; color: #fff; word-break: break-all;
}
.notfound-actions { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 640px) { .notfound-actions { flex-direction: row; } }
.notfound-btn {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 10px 16px; text-align: center; transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.notfound-btn.primary { background: #10b981; color: #0A0A0A; }
.notfound-btn.primary:hover { background: #fff; }
.notfound-btn.secondary { border: 1px solid #262626; color: #fff; }
.notfound-btn.secondary:hover { border-color: rgba(255, 255, 255, 0.4); }
.notfound-foot { font-size: 12px; color: #737373; margin-top: 48px; }
.notfound-foot a { color: #737373; text-underline-offset: 2px; }
.notfound-foot a:hover { color: #fff; text-decoration: underline; }

/* Reduced motion: the global rule freezes all animations, which makes
   rotating spinners look broken. Hide the spinner; the "Submitting..."
   text label already conveys the in-progress state. */
@media (prefers-reduced-motion: reduce) {
  [data-label-submitting] svg.animate-spin { display: none; }
}

.tab-panel { display: none; }
.tab-panel[data-active="true"] { display: block; }

.sdk-tab { color: #737373; }
.sdk-tab:hover { color: #fff; }
.sdk-tab[aria-selected="true"] {
  color: #10b981;
  background: rgba(23, 23, 23, 1);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0A0A0A; }
::-webkit-scrollbar-thumb { background: #262626; }
::-webkit-scrollbar-thumb:hover { background: #3c3c3c; }