/* 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: 80px; height: 80px; border-radius: 14px; object-fit: cover;
}

/* Each card is one <a>: undo the green/bold/underlined prose-link style
   from bowling.css (.bowl-page .inside a) and give it a hover state. */
.bowl-page .inside a.db-card,
.bowl-page .inside a.db-card:hover {
    color: inherit; font-weight: inherit; text-decoration: none;
}
.bowl-page .db-index .db-card {
    align-items: center; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.bowl-page .db-index .db-card:hover,
.bowl-page .db-index .db-card:focus-visible {
    background: #eef4ff; border-color: #b9cdf5; border-left-color: #1e40af;
    box-shadow: 0 2px 8px rgba(30, 64, 175, .12);
}
.bowl-page .db-index .db-card:hover h3,
.bowl-page .db-index .db-card:focus-visible h3 { color: #1e40af; }
.bowl-page .db-index .db-card h3,
.bowl-page .db-index .db-card * { text-decoration: none; }
.bowl-page .db-index .db-card:focus-visible { outline: 2px solid #1e40af; outline-offset: 2px; }
.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 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: 56px; height: 56px; }
}

/* Grey-blue hero on the Database Instructions landing page (.db-theme on
   .bowl-page). Same accent family as the Go page's .go-theme, but a
   lighter slate so it reads clearly as grey-blue, not near-black. The
   dark shell-prompt blocks inside stay dark. */
.db-theme .bowl-hero { background: #3a4b5c; border-color: #52667a; color: #e3e9ef; }
.db-theme .bowl-hero::before { background: linear-gradient(90deg, #93b4d4, #6f92b5, #93b4d4); background-size: 200% 100%; }
.db-theme .bowl-hero .eyebrow,
.db-theme .bowl-hero h1 em { color: #b7d0e8; }
.db-theme .bowl-hero .cursor { background: #b7d0e8; }
.db-theme .bowl-hero .lede { color: #d2dbe4; }
.db-theme .bowl-hero .lede code,
.db-theme .bowl-hero .lede em { color: #fff; }
.db-theme .bowl-hero .bowl-scoresheet .ss-label,
.db-theme .bowl-hero .bowl-final { color: #b3c1ce; }
.db-theme .bowl-hero .bowl-final strong { color: #b7d0e8; }
.db-theme .bowl-hero .bowl-expected { border-color: #52667a; }

/* Pros and cons: one card per database, three across (one on phones). */
.bowl-page .db-pc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 6px 0 16px; }
.bowl-page .db-pc-card { background: #f6f7f7; border: 1px solid #dcdcde; border-radius: 5px; padding: 12px 14px; }
.bowl-page .db-pc-name { font-weight: 700; color: #1d2327; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid #dcdcde; }
.bowl-page .inside .db-pc ul { list-style: none; margin: 0 0 10px; padding: 0; }
.bowl-page .inside .db-pc li { position: relative; padding-left: 22px; margin-bottom: 6px; font-size: .9rem; line-height: 1.5; }
.bowl-page .db-pc li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.bowl-page .db-pro li::before { content: "\2713"; color: #15803d; }
.bowl-page .db-con li::before { content: "\2715"; color: #b42318; }
@media (max-width: 860px) { .bowl-page .db-pc { grid-template-columns: 1fr; } }