/* Article-specific styles aligned with site article standards */
.article-page .container { /* use global .container sizing from /css/style.css (max-width:1200px) */ }
.article-page .content { margin-top: 1.5rem; line-height: 1.6; }
.article-page .lead { color: var(--color-text-secondary); margin-bottom: 1rem; }
.article-page .example { margin: 1rem 0; }
.toggle-example {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  background: var(--color-bg-card);
  color: var(--color-neon-cyan);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: var(--font-heading);
  box-shadow: none;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.toggle-example:hover{ transform: translateY(-2px); border-color: var(--color-neon-cyan); box-shadow: var(--shadow-neon-cyan); }
.toggle-example:active{ transform: translateY(0); }
.toggle-example:focus{ outline: none; box-shadow: 0 0 0 4px rgba(0,240,255,0.12); }
.toggle-example::after{ content: '▾'; display:inline-block; font-size:0.85rem; transition: transform .15s ease; color: var(--color-neon-magenta); }
.toggle-example.open::after{ transform: rotate(180deg); }
.toggle-example[aria-expanded="true"]{ background: linear-gradient(180deg, rgba(0,240,255,0.02), rgba(0,240,255,0.01)); }
.example-body { margin-top:0.6rem; padding:1rem; background:var(--color-bg-card); border-left:4px solid var(--color-neon-cyan); color:var(--color-text-secondary); border-radius:6px; box-shadow: 0 6px 18px rgba(0,240,255,0.03); }
.glossary dt { font-weight:700; margin-top:0.6rem; }
.glossary dd { margin-left:0; margin-bottom:0.6rem; }
.cta { font-weight:600; margin-top:1.2rem; }
.back-link { display:inline-block; margin-bottom:0.6rem; color:#1f6feb; }

@media (max-width:600px){
  .article-page .container { padding: 0 1rem; }
}