/* Guides index and article pages (app/views/guides) */
.guides-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 20px 64px;
  color: #1e293b;
  font-family: "Outfit", "Exo 2", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.7;
}
.guides-wrap .crumbs { font-size: 14px; color: #64748b; margin-bottom: 20px; }
.guides-wrap .crumbs a { color: #64748b; text-decoration: none; }
.guides-wrap .crumbs a:hover { color: #0891b2; text-decoration: underline; }
.guides-wrap h1 {
  font-family: "Russo One", "Outfit", sans-serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 12px;
  color: #0f172a;
}
.guides-wrap .lede { font-size: 1.15rem; color: #475569; margin: 0 0 32px; }
.guide-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; color: #64748b; }

.guide-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.guide-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px 22px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.guide-card:hover { box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); transform: translateY(-2px); }
.guide-card a { text-decoration: none; color: inherit; }
.guide-card h2 { font-size: 1.25rem; margin: 0 0 8px; color: #0f172a; line-height: 1.3; }
.guide-card h2:hover { color: #0891b2; }
.guide-card p { margin: 0 0 10px; color: #475569; }

.guide-header { margin-bottom: 20px; }
.play-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 28px;
  font-size: 15px;
}
.play-label { color: #155e75; font-weight: 600; margin-right: 4px; }
.play-chip {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: #0891b2;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.play-chip:hover { background: #0e7490; }

.guide-body h2 { font-size: 1.5rem; margin: 40px 0 12px; line-height: 1.25; color: #0f172a; }
.guide-body h3 { font-size: 1.15rem; margin: 28px 0 8px; color: #0f172a; }
.guide-body p { margin: 0 0 16px; }
.guide-body ul, .guide-body ol { margin: 0 0 16px; padding-left: 24px; }
.guide-body li { margin-bottom: 8px; }
.guide-body a { color: #0e7490; }
.guide-body table { border-collapse: collapse; width: 100%; margin: 0 0 20px; font-size: 15px; }
.guide-body th, .guide-body td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e2e8f0; vertical-align: top; }
.guide-body th { background: #f8fafc; font-weight: 600; }
.guide-body .table-scroll { overflow-x: auto; }
.guide-body .callout {
  background: #fff7ed;
  border-left: 4px solid #fb923c;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 0 20px;
}
.guide-body .callout p:last-child { margin: 0; }
.guide-body .board {
  display: grid;
  grid-template-columns: repeat(3, 48px);
  gap: 4px;
  margin: 0 0 16px;
}
.guide-body .board span {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 6px;
  font-family: "Russo One", sans-serif; font-size: 20px; color: #0f172a;
}
.guide-body .board .x { color: #0891b2; }
.guide-body .board .o { color: #f97316; }
.guide-body .board .dim { color: #94a3b8; font-size: 12px; font-family: "Outfit", sans-serif; }
.guide-body .toc { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 18px 14px 34px; margin: 0 0 24px; font-size: 15px; }
.guide-body .toc li { margin-bottom: 4px; }

.guide-related { margin-top: 40px; padding-top: 20px; border-top: 1px solid #e2e8f0; }
.guide-related h2 { font-size: 1.25rem; margin: 0 0 10px; }
.related-list { list-style: none; padding: 0; margin: 0; }
.related-list li { padding: 5px 0; }
.related-list a { color: #0e7490; font-weight: 600; text-decoration: none; }
.related-list a:hover { text-decoration: underline; }
.muted { color: #64748b; font-size: 0.9em; }