/* Database Instructions — the landing page (/examples/database/) and the two
   install guides. Layered on bowling.css; every rule is scoped under
   .bowl-page so nothing leaks into the other pages that share bowling.css. */

/* The three guides as full-width numbered cards, each with its icon. */
.bowl-page .bowl-steps.db-index { grid-template-columns: 1fr; gap: 10px; }
.bowl-page .db-index .bowl-step {
    display: flex; align-items: flex-start; gap: 14px;
    border-left-color: #388bfd;
}
.bowl-page .db-index .bowl-step .num { background: #1e40af; flex: none; margin: 2px 0 0; }
.bowl-page .db-index .db-ico {
    flex: none; width: 48px; height: 48px; border-radius: 10px; object-fit: cover;
}
.bowl-page .db-index .db-body { flex: 1; min-width: 0; }
.bowl-page .db-index .bowl-step h3 { display: block; font-size: 1.02rem; }
.bowl-page .db-index .bowl-step h3 a:hover { color: #1e40af; }
.bowl-page .db-index .bowl-step p { font-size: .93rem; }

/* Hero: the three shell prompts side by side. */
.bowl-page .db-prompts {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.bowl-page .db-prompts .bowl-expected { margin: 0; }
.bowl-page .db-prompts .db-name {
    display: block; margin-bottom: 6px; font-size: .72rem; letter-spacing: .08em;
    text-transform: uppercase; color: #8f9aa3;
}

@media (max-width: 640px) {
    .bowl-page .db-prompts { grid-template-columns: 1fr; }
    .bowl-page .db-index .db-ico { width: 40px; height: 40px; }
}