/* ==========================================================================
   openflow.css — components specific to the Openflow SQL Server connector doc
   Ported out of 16 duplicated inline <style> blocks. Only the components that
   are genuinely particular to this document live here; the pipeline strip,
   numbered steps, comparison tables, callouts and the section bar are all in
   the shared layer. Load after base.css and doc.css.

   Two names were changed on the way in to avoid colliding with existing
   components, so watch for these when comparing against the source:
     .card / .card-grid  ->  .infocard / .infocard-grid   (base.css .card is a
                             linked tile with a hover lift; these are static
                             bordered fact boxes and must not look clickable)
     .decide             ->  .mode-decide                 (courtroom.css also
                             defines a .decide)
     .pill / .pill-ct    ->  .mode-tag / .mt-ct           (base.css .tag is the
                             site-wide chip; these mark a capture mode, not an
                             availability status)
   ========================================================================== */

/* --- fact cards ----------------------------------------------------------
   Static bordered boxes in a grid, accented by role. Used for port tables
   and protocol requirements, where .callout would be too heavy.
   ------------------------------------------------------------------------- */

.infocard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; margin: 1.25rem 0; }
.infocard { background: var(--bg); border: 1px solid var(--border); border-left: 4px solid var(--sf-blue); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow-sm); }
.infocard.warn { border-left-color: var(--warning); }
.infocard.ok { border-left-color: var(--success); }
.infocard h3 { margin: 0 0 0.5rem; font-size: 1.02rem; }
.infocard-desc { font-size: 0.9rem; color: var(--text-muted); }

.kv { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.85rem; padding: 0.2rem 0; }
.kv .k { color: var(--text-muted); }
.kv .v { color: var(--text); font-weight: 600; }

/* --- capture mode comparison ---------------------------------------------
   Side-by-side cards with a gradient header, for Change Tracking vs CDC and
   single- vs multi-database. The header gradients differ so the two modes
   stay distinguishable when the cards wrap on a narrow screen.
   ------------------------------------------------------------------------- */

.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 1.5rem 0; }
.mode { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); box-shadow: var(--shadow-sm); overflow: hidden; }
.mode-head { padding: 1.1rem 1.25rem; color: #fff; }
.mode.ct .mode-head { background: linear-gradient(135deg, var(--sf-blue-deep), var(--sf-blue-darker)); }
.mode.cdc .mode-head { background: linear-gradient(135deg, #1B7BA8, var(--sf-blue-deep)); }
.mode-head .k { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sf-cyan); font-weight: 700; }
.mode-head .t { font-size: 1.2rem; font-weight: 700; margin-top: 0.15rem; }
.mode-body { padding: 1.1rem 1.25rem; }
.mode-body p { margin: 0 0 0.75rem; font-size: 0.92rem; }
.mode-body ul { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; color: var(--text-muted); }
.mode-body li { margin: 0.3rem 0; }

/* "Which should you pick?" — two recommendation boxes side by side. */
.mode-decide { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 1.25rem 0; }
.mode-decide .box { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; background: var(--bg); }
.mode-decide .box.ct { border-left: 4px solid var(--sf-blue-deep); }
.mode-decide .box.cdc { border-left: 4px solid var(--sf-blue); }
.mode-decide .box h3 { margin: 0 0 0.5rem; font-size: 1.02rem; }
.mode-decide ul { margin: 0.5rem 0 0; padding-left: 1.1rem; color: var(--text-muted); font-size: 0.9rem; }
.mode-decide li { margin: 0.3rem 0; }

/* Mode marker. Not an availability tag — use base.css .tag-* for those. */
.mode-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.15em 0.6em; border-radius: 999px; margin: 0 0.3rem 0.3rem 0; }
.mt-ct { background: var(--sf-blue-pale); color: var(--sf-blue-deep); border: 1px solid #BEE6F7; }
.mt-cdc { background: #EAF2F7; color: var(--sf-blue-darker); border: 1px solid #CFD7E0; }

/* --- numbered feature list ----------------------------------------------- */

.features { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; margin: 1.25rem 0; }
.feature { padding: 1rem 0; border-top: 1px solid var(--border); }
.feature h3 { display: flex; align-items: baseline; gap: 0.5rem; font-size: 1.02rem; }
.feature h3 .n { font-family: var(--font-mono); font-size: 0.8rem; color: var(--sf-blue); font-weight: 700; }
.feature p { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--text-muted); }

/* --- pain to gain -------------------------------------------------------- */

.pg { margin: 1.25rem 0; }
.pg-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--border); }
.pg-row:first-child { border-top: 1px solid var(--border); }
.pg-pain { color: var(--text-muted); }
.pg-arrow { color: var(--sf-blue); font-weight: 700; }
.pg-gain { font-weight: 600; color: var(--text); }

/* --- use cases ----------------------------------------------------------- */

.uc { border-top: 1px solid var(--border); margin: 1.5rem 0; }
.uc-item { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--border); }
.uc-num { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; color: var(--sf-blue); }
.uc-side h3 { font-size: 1.15rem; margin-top: 0.25rem; }
.uc-mode { margin-top: 0.5rem; }
.uc-body p { margin: 0 0 0.6rem; }
.uc-body .why { font-size: 0.9rem; color: var(--text-muted); }
.uc-body .why strong { color: var(--text); }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; }
.chip { font-size: 0.85rem; font-weight: 600; color: var(--sf-blue-deep); background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--sf-blue); border-radius: var(--radius); padding: 0.5rem 0.85rem; }

/* --- stream lifecycle ----------------------------------------------------
   Three-state diagram for stream staleness: healthy, at risk, stale. The
   state colors are deliberately not the generic success/warning/error tokens
   because the middle state is a warning about a future failure, not a
   caution about the current one.
   ------------------------------------------------------------------------- */

.lifecycle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 1.5rem 0; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.lc-node { flex: 1 1 130px; text-align: center; }
.lc-badge { display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; border-radius: var(--radius-lg); font-size: 1.8rem; margin-bottom: 0.5rem; }
.lc-active { background: #E3F7EC; color: #1B7A46; }
.lc-risk { background: #FFF7E6; color: #B7791F; }
.lc-stale { background: #FBE7E7; color: #9B2C2C; }
.lc-title { font-weight: 700; font-size: 0.9rem; }
.lc-title.t-active { color: #1B7A46; }
.lc-title.t-risk { color: #B7791F; }
.lc-title.t-stale { color: #9B2C2C; }
.lc-sub { font-size: 0.75rem; color: var(--text-muted); }
.lc-sep { flex: 0 0 auto; text-align: center; color: var(--text-muted); font-size: 0.72rem; }
.lc-sep .bar { display: block; height: 2px; width: 3rem; background: var(--border-strong); margin: 0.3rem auto; }

/* --- scaling signals ----------------------------------------------------
   "You need to scale when you see these" lists. Glyph bullet rather than a
   disc, so the list reads as evidence rather than instructions.
   ------------------------------------------------------------------------- */

.signals { margin: 1rem 0 0; padding-left: 0; list-style: none; }
.signals li { position: relative; padding: 0.55rem 0 0.55rem 1.6rem; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.signals li:before { content: "\25B8"; position: absolute; left: 0; color: var(--sf-blue); font-weight: 700; }
.signals li strong { color: var(--sf-blue-deep); }

/* --- processor category chips -------------------------------------------
   Colored glyph tiles beside the h2s on the reference pages, so a long run
   of similar-looking processor tables stays scannable.
   ------------------------------------------------------------------------- */

.cat-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: var(--radius); font-size: 1rem; border: 1px solid transparent; }
.ci-red { background: #FBE7E7; color: #9B2C2C; border-color: #E4A3A3; }
.ci-blue { background: var(--sf-blue-pale); color: var(--sf-blue-deep); border-color: #A9D8EC; }
.ci-purple { background: #F1E9FB; color: #6B3FA0; border-color: #D3BCEC; }
.ci-green { background: #E3F7EC; color: #1B7A46; border-color: #8FD9B0; }
.ci-cyan { background: #E2F6F8; color: #0E7490; border-color: #9BDCE4; }
h2 .cat-icon { margin-right: 0.55rem; vertical-align: middle; }

/* A numbered step used as a heading rather than in a card grid, so a step can
   own a full-width code block. The badge itself is defined in doc.css. */
h2 .step-num { margin: 0 0.55rem 0 0; vertical-align: middle; }

/* --- inline monospace ---------------------------------------------------
   Lighter than <code>, which carries a background and border. Used heavily
   inside table cells where a boxed <code> would fight the row.
   ------------------------------------------------------------------------- */

.mono { font-family: var(--font-mono); font-size: 0.82em; color: var(--sf-blue-darker); }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 820px) {
  .modes, .mode-decide { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .features { grid-template-columns: 1fr; }
  .uc-item { grid-template-columns: 1fr; gap: 0.75rem; }
}
@media (max-width: 620px) {
  .pg-row { grid-template-columns: 1fr; gap: 0.35rem; }
  .pg-arrow { display: none; }
}