/* ── Guides — self-contained styles for the guide content ── */

.guides {
  color: #aeaed1;
  font-family: 'Ubuntu Mono', 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 1.1rem;
  line-height: 1.5;
}
.guides h1 {
  text-align: center;
  font-family: 'Doto', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  color: #c6c6df;
  margin-bottom: 0.3rem;
  letter-spacing: 0.05em;
}
.guides .subtitle {
  text-align: center;
  color: #545c8c;
  margin-bottom: 2rem;
  font-size: 0.9rem;
}
.guides .desc {
  color: #6a6a9a;
  text-align: center;
  margin-bottom: 2rem;
  font-size: 0.95rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Visual Example ── */
.guides .visual-example {
  background: #1e1a2b;
  border: 1px solid #6565a7;
  border-radius: 8px;
  padding: 0.8rem 1.2rem;
  margin: 0 auto 2rem;
  max-width: 720px;
  font-size: 0.82rem;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
  color: #8585b0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.guides .visual-example .hl { color: #c6c6df; }
.guides .visual-example .add { color: #7ec9b0; }
.guides .visual-example .del { color: #c9879c; }
.guides .visual-example .warn { color: #c9b07e; }
.guides .visual-example .dim { color: #3a3555; }
.guides .visual-example .accent { color: #b794d6; }

/* ── Card Grid ── */
.guides .grid {
  columns: 3;
  column-gap: 1.2rem;
}
.guides .card {
  background: rgba(174, 174, 209, 0.06);
  border: 1px solid #4a4580;
  border-radius: 8px;
  padding: 1.2rem;
  break-inside: avoid;
  margin-bottom: 1.2rem;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.guides .card:hover {
  background: rgba(174, 174, 209, 0.1);
  border-color: #6565a7;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.guides .card h2 {
  font-family: 'Doto', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid;
}

/* ── Card color variants ── */
.guides .c1 h2  { color: #c9879c; border-color: #c9879c33; }
.guides .c2 h2  { color: #c9b07e; border-color: #c9b07e33; }
.guides .c3 h2  { color: #b794d6; border-color: #b794d633; }
.guides .c4 h2  { color: #7ec9b0; border-color: #7ec9b033; }
.guides .c5 h2  { color: #9eaed6; border-color: #9eaed633; }
.guides .c6 h2  { color: #c9a07e; border-color: #c9a07e33; }
.guides .c7 h2  { color: #c98fb3; border-color: #c98fb333; }
.guides .c8 h2  { color: #7ec9c4; border-color: #7ec9c433; }
.guides .c9 h2  { color: #8e9fd4; border-color: #8e9fd433; }
.guides .c10 h2 { color: #c9b87e; border-color: #c9b87e33; }
.guides .c11 h2 { color: #c98775; border-color: #c9877533; }
.guides .c12 h2 { color: #a99bce; border-color: #a99bce33; }
.guides .c13 h2 { color: #7ebec9; border-color: #7ebec933; }
.guides .c14 h2 { color: #c9a190; border-color: #c9a19033; }
.guides .c15 h2 { color: #8ec4c9; border-color: #8ec4c933; }

/* ── Tables ── */
.guides table { width: 100%; border-collapse: collapse; }
.guides tr:not(:last-child) td { border-bottom: 1px solid #33304a; }
.guides td { padding: 0.3rem 0; vertical-align: top; }
.guides td:first-child {
  white-space: nowrap;
  padding-right: 1rem;
  font-weight: 600;
  min-width: 120px;
  color: #c6c6df;
}
.guides td:last-child { color: #8585b0; }

/* ── Inline elements ── */
.guides kbd {
  background: #33304a;
  border: 1px solid #4a4580;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.85em;
  color: #e8e8f0;
  font-family: inherit;
}
.guides .sep { color: #4a4580; margin: 0 0.15rem; }
.guides .leader {
  background: #3d2a5c;
  border-color: #6565a7;
  color: #b794d6;
}
.guides .note {
  color: #545c8c;
  font-size: 0.8rem;
  font-style: italic;
  margin-top: 0.5rem;
}
.guides code {
  background: #33304a;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  font-size: 0.9em;
  color: #b794d6;
}
.guides .docs-link {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 0.85rem;
}
.guides .docs-link a {
  color: #8585b0;
  text-decoration: none;
  border-bottom: 1px solid #4a4580;
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.guides .docs-link a:hover {
  color: #c6c6df;
  border-color: #6565a7;
}
.guides .docs-link a + a { margin-left: 1.5rem; }
.guides .tip {
  text-align: center;
  color: #4a4580;
  margin-top: 2rem;
  font-size: 0.8rem;
}
.guides .tip a {
  color: #8585b0;
  text-decoration: none;
  border-bottom: 1px solid #4a4580;
}
.guides .tip a:hover {
  color: #c6c6df;
}

/* ── Responsive ── */
@media (max-width: 2800px) {
  .guides .grid { columns: 2; }
}
@media (max-width: 700px) {
  .guides .grid { columns: 1; }
}