<section class="ba-bdl" aria-label="Border-left minimalist alert demo">
  <div class="section-label">// Standard alerts</div>

  <div class="card">
    <div class="alert" data-c="success"><div class="alert-row"><span class="alert-type">success</span><span class="alert-rule" aria-hidden="true"></span><span class="alert-dot" aria-hidden="true"></span></div><div class="alert-title">Deployment complete.</div><div class="alert-body">Version 3.8.1 is now live across all regions. Zero downtime recorded during the rollout window.</div><a href="#" class="alert-link">View deployment log</a></div>
    <div class="alert" data-c="error"><div class="alert-row"><span class="alert-type">error</span><span class="alert-rule" aria-hidden="true"></span><span class="alert-dot" aria-hidden="true"></span></div><div class="alert-title">Database connection refused.</div><div class="alert-body">Unable to reach <code>pg-primary.cluster.internal:5432</code>. Check that your DB is accepting connections and firewall rules permit access from this host.</div><a href="#" class="alert-link">View troubleshooting guide</a></div>
    <div class="alert" data-c="warning"><div class="alert-row"><span class="alert-type">warning</span><span class="alert-rule" aria-hidden="true"></span><span class="alert-dot" aria-hidden="true"></span></div><div class="alert-title">Deprecated method in use.</div><div class="alert-body">Your codebase calls <code>client.legacyAuth()</code> which will be removed in v4.0. Migrate to <code>client.auth.verify()</code> before the next major release.</div><a href="#" class="alert-link">Migration guide</a></div>
    <div class="alert" data-c="info"><div class="alert-row"><span class="alert-type">info</span><span class="alert-rule" aria-hidden="true"></span><span class="alert-dot" aria-hidden="true"></span></div><div class="alert-title">Read-only mode is active.</div><div class="alert-body">You are browsing a shared workspace snapshot. Changes you make will not be saved. Switch to your personal workspace to enable editing.</div><a href="#" class="alert-link">Switch workspace</a></div>
    <div class="alert" data-c="purple"><div class="alert-row"><span class="alert-type">note</span><span class="alert-rule" aria-hidden="true"></span><span class="alert-dot" aria-hidden="true"></span></div><div class="alert-title">Experimental feature enabled.</div><div class="alert-body">You have opted into the <code>ai-suggest</code> beta. Behaviour may change without notice between releases.</div></div>
  </div>

  <div class="section-gap" aria-hidden="true"></div>
  <div class="section-label">// Compact inline alerts</div>

  <div class="card">
    <div class="alert alert--compact" data-c="success"><span class="compact-type">ok</span><span class="compact-divider" aria-hidden="true"></span><span class="compact-text"><strong>2,048 records</strong> imported without errors.</span></div>
    <div class="alert alert--compact" data-c="error"><span class="compact-type">fail</span><span class="compact-divider" aria-hidden="true"></span><span class="compact-text"><strong>Invalid token.</strong> Session has expired — please sign in again.</span></div>
    <div class="alert alert--compact" data-c="warning"><span class="compact-type">warn</span><span class="compact-divider" aria-hidden="true"></span><span class="compact-text">You have <strong>3 unreviewed</strong> pull requests older than 14 days.</span></div>
    <div class="alert alert--compact" data-c="info"><span class="compact-type">info</span><span class="compact-divider" aria-hidden="true"></span><span class="compact-text">Webhooks are replayed in <strong>FIFO order</strong> with exponential back-off.</span></div>
    <div class="alert alert--compact" data-c="neutral"><span class="compact-type">note</span><span class="compact-divider" aria-hidden="true"></span><span class="compact-text">This endpoint is <strong>rate-limited</strong> to 120 requests per minute per API key.</span></div>
    <div class="alert alert--compact" data-c="pink"><span class="compact-type">new</span><span class="compact-divider" aria-hidden="true"></span><span class="compact-text">Streaming responses now supported via <code>Accept: text/event-stream</code>.</span></div>
  </div>
</section>

/* ─── 09 Minimalist Border-Left Alert — Swiss documentation ──── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&family=Geist+Mono:wght@300;400;500&display=swap');

.ba-bdl {
  --ba-bdl-bg: #fafaf9;
  --ba-bdl-surface: #ffffff;
  --ba-bdl-ink: #111110;
  --ba-bdl-muted: #6f6e6b;
  --ba-bdl-faint: #e8e8e6;
  --ba-bdl-c-success: #16a34a;
  --ba-bdl-c-error: #dc2626;
  --ba-bdl-c-warning: #ca8a04;
  --ba-bdl-c-info: #2563eb;
  --ba-bdl-c-neutral: #71717a;
  --ba-bdl-c-purple: #7c3aed;
  --ba-bdl-c-pink: #db2777;
  --ba-bdl-border-width: 3px;
  --ba-bdl-radius: 2px;

  position: relative;
  width: 100%;
  min-height: 820px;
  background: var(--ba-bdl-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 24px;
  gap: 2px;
  font-family: 'Fraunces', serif;
  box-sizing: border-box;
}
.ba-bdl *, .ba-bdl *::before, .ba-bdl *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-bdl .section-label { font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: #ccc; align-self: flex-start; max-width: 600px; width: 100%; }
.ba-bdl .section-gap { height: 24px; width: 100%; max-width: 600px; }
.ba-bdl .card { width: 100%; max-width: 600px; border: 1px solid var(--ba-bdl-faint); border-radius: var(--ba-bdl-radius); overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.04); animation: ba-bdl-up 0.5s ease both; }
@keyframes ba-bdl-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.ba-bdl .alert { width: 100%; background: var(--ba-bdl-surface); padding: 16px 20px; position: relative; transition: background 0.18s; border-left: var(--ba-bdl-border-width) solid var(--ba-bdl-c-info); }
.ba-bdl .alert[data-c="success"] { border-left-color: var(--ba-bdl-c-success); --c: var(--ba-bdl-c-success); }
.ba-bdl .alert[data-c="error"]   { border-left-color: var(--ba-bdl-c-error);   --c: var(--ba-bdl-c-error); }
.ba-bdl .alert[data-c="warning"] { border-left-color: var(--ba-bdl-c-warning); --c: var(--ba-bdl-c-warning); }
.ba-bdl .alert[data-c="info"]    { border-left-color: var(--ba-bdl-c-info);    --c: var(--ba-bdl-c-info); }
.ba-bdl .alert[data-c="neutral"] { border-left-color: var(--ba-bdl-c-neutral); --c: var(--ba-bdl-c-neutral); }
.ba-bdl .alert[data-c="purple"]  { border-left-color: var(--ba-bdl-c-purple);  --c: var(--ba-bdl-c-purple); }
.ba-bdl .alert[data-c="pink"]    { border-left-color: var(--ba-bdl-c-pink);    --c: var(--ba-bdl-c-pink); }
.ba-bdl .alert + .alert { border-top: 1px solid var(--ba-bdl-faint); }
.ba-bdl .alert:hover { background: #fafafa; }

.ba-bdl .alert-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.ba-bdl .alert-type { font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c); flex-shrink: 0; }
.ba-bdl .alert-rule { flex: 1; height: 1px; background: var(--c); opacity: 0.15; align-self: center; }
.ba-bdl .alert-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c); opacity: 0.5; align-self: center; flex-shrink: 0; }
.ba-bdl .alert-title { font-size: 17px; font-weight: 600; color: var(--ba-bdl-ink); line-height: 1.3; margin-bottom: 4px; letter-spacing: -0.01em; }
.ba-bdl .alert-body { font-size: 14px; font-weight: 300; color: var(--ba-bdl-muted); line-height: 1.75; font-style: italic; }
.ba-bdl .alert-body code { font-family: 'Geist Mono', monospace; font-size: 12px; font-style: normal; font-weight: 400; background: var(--ba-bdl-faint); padding: 1px 5px; border-radius: 3px; color: var(--ba-bdl-ink); }
.ba-bdl .alert-link { font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 500; color: var(--c); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s; margin-top: 10px; display: inline-block; letter-spacing: 0.04em; }
.ba-bdl .alert-link:hover { border-color: var(--c); }
.ba-bdl .alert-link::after { content: ' →'; }

.ba-bdl .alert--compact { padding: 11px 18px; display: flex; align-items: center; gap: 14px; }
.ba-bdl .alert--compact .compact-type { font-family: 'Geist Mono', monospace; font-size: 9.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c); flex-shrink: 0; white-space: nowrap; }
.ba-bdl .alert--compact .compact-text { font-size: 13.5px; font-weight: 300; color: var(--ba-bdl-muted); font-style: italic; line-height: 1.45; flex: 1; }
.ba-bdl .alert--compact .compact-text strong { font-style: normal; font-weight: 600; color: var(--ba-bdl-ink); }
.ba-bdl .alert--compact .compact-text code { font-family: 'Geist Mono', monospace; font-style: normal; font-size: 11px; background: var(--ba-bdl-faint); padding: 1px 4px; border-radius: 3px; }
.ba-bdl .compact-divider { width: 1px; height: 16px; background: var(--ba-bdl-faint); flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) { .ba-bdl .card { animation: none; } }