/* TON-blue theme. Sits on top of Tailwind via CDN. */
:root {
  --ton-50:  #E6F5FD;
  --ton-100: #CCE9FB;
  --ton-200: #99D4F7;
  --ton-300: #66BEF3;
  --ton-400: #33A9EF;
  --ton-500: #0098EA; /* TON brand blue */
  --ton-600: #0080C4;
  --ton-700: #00689E;
  --ton-800: #005078;
  --ton-900: #003852;
  --bg-deep: #050B17;
  --bg-card: #0B1525;
  --bg-card-2: #101F36;
  --line: rgba(0, 152, 234, 0.18);
  --text: #E7F1F9;
  --text-dim: #8FA6BD;
}

html { scroll-behavior: smooth; }

/* Global safety net — never let page-level horizontal overflow push the viewport sideways.
   Long code blocks scroll inside their own container instead. */
html, body { overflow-x: hidden; max-width: 100%; }

body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(0,152,234,0.20), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(0,152,234,0.14), transparent 60%),
    var(--bg-deep);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Cards must collapse properly inside CSS grid / flex parents. Without min-width:0
   the longest pre line dictates the column width and breaks the layout on phones. */
.card { min-width: 0; }
.card > pre, .card pre { max-width: 100%; }

/* Animated subtle grid background — adds depth without distraction */
.grid-bg {
  background-image:
    linear-gradient(rgba(0,152,234,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,152,234,0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
}

.glow {
  box-shadow:
    0 0 0 1px rgba(0,152,234,0.25),
    0 10px 40px -10px rgba(0,152,234,0.45);
}

.btn-primary {
  background: linear-gradient(180deg, #21A8F0 0%, #0085D1 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 8px 24px -6px rgba(0,152,234,0.55);
}
.btn-primary:hover { filter: brightness(1.07); }

.btn-ghost {
  border: 1px solid rgba(0,152,234,0.35);
  color: var(--ton-200);
}
.btn-ghost:hover {
  background: rgba(0,152,234,0.08);
  color: #fff;
}

.card {
  background: linear-gradient(180deg, rgba(16,31,54,0.85) 0%, rgba(11,21,37,0.85) 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  backdrop-filter: blur(8px);
}

.divider-soft {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,152,234,0.25), transparent);
}

.kbd {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  background: rgba(0,152,234,0.10);
  border: 1px solid rgba(0,152,234,0.25);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 0.85em;
  color: var(--ton-200);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,152,234,0.25);
  background: rgba(0,152,234,0.08);
  font-size: 12px;
  color: var(--ton-200);
}

.gradient-text {
  background: linear-gradient(180deg, #FFFFFF 0%, #9DD8FF 110%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

a { color: var(--ton-300); }
a:hover { color: var(--ton-100); }

.prose-doc h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 2rem 0 .75rem;
  color: #fff;
}
.prose-doc h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 1.4rem 0 .5rem;
  color: var(--ton-100);
}
.prose-doc p, .prose-doc li {
  color: var(--text-dim);
  line-height: 1.7;
}
.prose-doc ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: .5rem 0 1rem;
}
.prose-doc strong { color: #fff; }
.prose-doc code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: rgba(0,152,234,0.10);
  border: 1px solid rgba(0,152,234,0.20);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 0.92em;
}

/* Mobile menu */
#mobileMenu { transition: max-height .3s ease; max-height: 0; overflow: hidden; }
#mobileMenu.open { max-height: 480px; }

/* Long jetton addresses, code spans and pre blocks should never escape their container */
.prose-doc code { word-break: break-word; }
.prose-doc pre, pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Tighter typography on small screens */
@media (max-width: 640px) {
  .prose-doc h2 { font-size: 1.25rem; }
  .prose-doc h3 { font-size: 1rem; }
  .prose-doc p, .prose-doc li { line-height: 1.65; }
  .gradient-text { letter-spacing: -0.01em; }
  .kbd { font-size: 0.78em; padding: 1px 5px; }
}

/* Make sure buttons are full-width on phones for better tap targets */
@media (max-width: 480px) {
  .btn-primary, .btn-ghost {
    width: 100%;
    text-align: center;
    display: inline-block;
  }
  /* Per-page exceptions — header buttons stay inline */
  header .btn-primary, header .btn-ghost { width: auto; }
}