/* ===========================================================================
   VENDORED FROM THE DATABRIDGE APPLICATION - DO NOT EDIT THIS FILE BY HAND.

   Source : src/DataBridge.Web/wwwroot/css/databridge-ui.css
   Digest : sha256:539195bd76433497 (of the whole source file)
   Rebuild: python tools/extract-db-ui.py
   Verify : python tools/extract-db-ui.py --check   (non-zero exit when stale)

   The marketing site is built out of the product's own design language, so the
   palette and the shared component rules are COPIED from the app rather than
   re-typed. Everything below is byte-for-byte what the application ships.

   Marketing-only additions - the display type scale, the reading measure, the
   section rhythm, screenshot framing - live in site.css, never here.

   The digest changes whenever the app's stylesheet changes. When --check fails,
   re-run the extractor and re-read the diff: the site is meant to track the app.
   =========================================================================== */

:root {
    /* neutrals — paper-grey, never pure white */
    --db-app: #e9ecf0;
    --db-surface: #f4f6f8;
    --db-surface-2: #eceff3;
    --db-surface-3: #e3e7ec;
    --db-band: #eceff3;
    --db-band-2: #e3e7ec;

    --db-line: #cfd5dc;
    --db-line-soft: #dde2e8;
    --db-line-strong: #b6bec8;

    --db-ink: #1b2128;
    --db-ink-2: #3d4650;
    --db-muted: #6b7482;
    --db-faint: #98a1ad;

    /* accent — interaction only */
    --db-accent: #1f5fa8;
    --db-accent-deep: #17497f;
    --db-accent-soft: #e4edf7;
    --db-accent-line: #b9d0e8;
    --db-on-accent: #ffffff;

    /* semantic — state only */
    --db-ok: #17694a;
    --db-ok-bg: #e2f0e9;
    --db-ok-line: #a9cfbe;
    --db-warn: #8a5a08;
    --db-warn-bg: #f8eeda;
    --db-warn-line: #ddc590;
    --db-crit: #a32b1e;
    --db-crit-bg: #f9e5e1;
    --db-crit-line: #e8b6ac;
    --db-idle: #5f6874;
    --db-idle-bg: #e9ebef;
    --db-idle-line: #ccd2da;

    --db-shadow-1: 0 1px 2px rgba(22, 28, 36, 0.07);
    --db-shadow-2: 0 2px 4px rgba(22, 28, 36, 0.08), 0 10px 24px rgba(22, 28, 36, 0.10);

    --db-radius: 3px;
    --db-radius-lg: 4px;

    --db-font-ui: "IBM Plex Sans", "Segoe UI", system-ui, Arial, sans-serif;
    --db-font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, "SF Mono", monospace;

    /* geometry — the shell is a fixed grid, these are its only knobs */
    --db-topbar-h: 44px;
    --db-status-h: 26px;
    --db-nav-w: 244px;
    --db-rail-w: 296px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --db-app: #101418;
        --db-surface: #171c22;
        --db-surface-2: #1d232a;
        --db-surface-3: #242b33;
        --db-band: #1c222a;
        --db-band-2: #232a34;

        --db-line: #2b333d;
        --db-line-soft: #262d37;
        --db-line-strong: #3b4551;

        --db-ink: #e9edf2;
        --db-ink-2: #c2c9d3;
        --db-muted: #8b95a3;
        --db-faint: #626c7a;

        --db-accent: #79ade3;
        --db-accent-deep: #9cc4ee;
        --db-accent-soft: #1b2a3b;
        --db-accent-line: #2f4a68;
        --db-on-accent: #0b1219;

        --db-ok: #63c391;
        --db-ok-bg: #162c24;
        --db-ok-line: #2c5844;
        --db-warn: #d9a84d;
        --db-warn-bg: #2e2617;
        --db-warn-line: #5f4c26;
        --db-crit: #e07b68;
        --db-crit-bg: #351f1c;
        --db-crit-line: #6d4038;
        --db-idle: #929cab;
        --db-idle-bg: #222932;
        --db-idle-line: #39414d;

        --db-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
        --db-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.5), 0 10px 26px rgba(0, 0, 0, 0.45);
    }
}

:root[data-theme="dark"] {
    --db-app: #101418;
    --db-surface: #171c22;
    --db-surface-2: #1d232a;
    --db-surface-3: #242b33;
    --db-band: #1c222a;
    --db-band-2: #232a34;

    --db-line: #2b333d;
    --db-line-soft: #262d37;
    --db-line-strong: #3b4551;

    --db-ink: #e9edf2;
    --db-ink-2: #c2c9d3;
    --db-muted: #8b95a3;
    --db-faint: #626c7a;

    --db-accent: #79ade3;
    --db-accent-deep: #9cc4ee;
    --db-accent-soft: #1b2a3b;
    --db-accent-line: #2f4a68;
    --db-on-accent: #0b1219;

    --db-ok: #63c391;
    --db-ok-bg: #162c24;
    --db-ok-line: #2c5844;
    --db-warn: #d9a84d;
    --db-warn-bg: #2e2617;
    --db-warn-line: #5f4c26;
    --db-crit: #e07b68;
    --db-crit-bg: #351f1c;
    --db-crit-line: #6d4038;
    --db-idle: #929cab;
    --db-idle-bg: #222932;
    --db-idle-line: #39414d;

    --db-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --db-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.5), 0 10px 26px rgba(0, 0, 0, 0.45);
}

.db-mono {
    font-family: var(--db-font-mono);
    letter-spacing: -0.01em;
}

.db-topbar {
    grid-area: topbar;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px 0 14px;
    background: var(--db-band-2);
    border-bottom: 1px solid var(--db-line);
    min-width: 0;
}

.db-brand {
 display: flex; align-items: center; gap: 8px; white-space: nowrap; color: inherit;
}

.db-brand:hover {
 text-decoration: none;
}

.db-brand-mark {
    width: 24px;
    height: 24px;
    border-radius: var(--db-radius);
    background: var(--db-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.db-brand-name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--db-ink);
}

.db-env-chip {
    font-family: var(--db-font-mono);
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border: 1px solid var(--db-line);
    border-radius: var(--db-radius);
    background: var(--db-surface);
    color: var(--db-ink-2);
    white-space: nowrap;
}

.db-cmdbar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 14px;
    height: 42px;
    background: var(--db-surface);
    border-bottom: 1px solid var(--db-line);
    overflow-x: auto;
    flex: none;
}

.db-cmdgroup {
 display: flex; align-items: center; gap: 2px; padding: 0 10px;
}

.db-cmdgroup:first-child {
 padding-left: 0;
}

.db-cmdgroup-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--db-faint);
    margin-right: 8px;
    white-space: nowrap;
}

.db-cmdsep {
    width: 1px;
    align-self: stretch;
    margin: 8px 2px;
    background: var(--db-line);
    flex: none;
}

.db-cmdgroup + .db-cmdgroup::before {
    content: "";
    width: 1px;
    align-self: stretch;
    margin: 8px 10px 8px 0;
    background: var(--db-line);
    flex: none;
}

.db-cmd {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--db-radius);
    background: transparent;
    color: var(--db-ink-2);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}

.db-cmd:hover {
    background: var(--db-accent-soft);
    border-color: var(--db-accent-line);
    color: var(--db-accent-deep);
    text-decoration: none;
}

.db-cmd[disabled] {
 opacity: 0.42; cursor: default;
}

.db-cmd[disabled]:hover {
    background: transparent;
    border-color: transparent;
    color: var(--db-ink-2);
}

.db-statusbar {
    grid-area: status;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    background: var(--db-band-2);
    border-top: 1px solid var(--db-line);
    font-size: 12px;
    color: var(--db-ink-2);
    white-space: nowrap;
    overflow: hidden;
}

.db-statusbar .db-k {
 color: var(--db-muted);
}

.db-statusbar .db-mono {
 font-size: 11.5px;
}

.db-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--db-line);
    border-radius: var(--db-radius);
    background: var(--db-surface);
    color: var(--db-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.db-btn:hover {
    background: var(--db-surface-3);
    color: var(--db-ink);
    border-color: var(--db-line-strong);
    text-decoration: none;
}

.db-btn.db-primary {
    background: var(--db-accent);
    border-color: var(--db-accent);
    color: var(--db-on-accent);
}

.db-btn.db-primary:hover {
    background: var(--db-accent-deep);
    border-color: var(--db-accent-deep);
    color: var(--db-on-accent);
}

.db-btn.db-tiny {
 height: 22px; padding: 0 8px; font-size: 12px;
}

.db-btn[disabled] {
 opacity: 0.42; cursor: default;
}

.db-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    padding: 0 8px 0 6px;
    border: 1px solid var(--db-idle-line);
    border-radius: 10px;
    background: var(--db-idle-bg);
    color: var(--db-idle);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.db-pill.db-ok {
 color: var(--db-ok); background: var(--db-ok-bg); border-color: var(--db-ok-line);
}

.db-pill.db-warn {
 color: var(--db-warn); background: var(--db-warn-bg); border-color: var(--db-warn-line);
}

.db-pill.db-info {
 color: var(--db-accent-deep); background: var(--db-accent-soft); border-color: var(--db-accent-line);
}

.db-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border: 1px solid var(--db-line);
    border-radius: 12px;
    background: var(--db-surface-2);
    color: var(--db-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.db-chip:hover {
 border-color: var(--db-line-strong); color: var(--db-ink);
}

.db-panel {
    background: var(--db-surface);
    border: 1px solid var(--db-line);
    border-radius: var(--db-radius-lg);
    box-shadow: var(--db-shadow-1);
    overflow: hidden;
}

.db-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    background: var(--db-surface-2);
    border-bottom: 1px solid var(--db-line);
}

.db-panel-head h2 {
 font-size: 13px; font-weight: 700; color: var(--db-ink); letter-spacing: 0.01em;
}

.db-panel-body {
 padding: 12px 13px;
}

.db-modstrip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--db-line-soft);
    border: 1px solid var(--db-line);
    border-radius: var(--db-radius-lg);
    overflow: hidden;
}

.db-modtile {
    background: var(--db-surface);
    padding: 9px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    border: 0;
    min-width: 0;
    text-decoration: none;
}

.db-modtile:hover {
 background: var(--db-surface-2); text-decoration: none;
}

.db-modtile .db-name {
 font-size: 12px; font-weight: 600; color: var(--db-ink-2);
}

.db-table {
 width: 100%; border-collapse: collapse;
}

.db-table thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--db-muted);
    background: var(--db-surface-2);
    padding: 7px 12px;
    border-bottom: 1px solid var(--db-line);
    white-space: nowrap;
}

.db-table tbody td {
    padding: 7px 12px;
    border-bottom: 1px solid var(--db-line-soft);
    font-size: 13px;
    color: var(--db-ink-2);
    vertical-align: middle;
}

.db-table tbody tr:last-child td {
 border-bottom: 0;
}

.db-table tbody tr:hover td {
 background: var(--db-surface-2);
}

.db-table td.db-name {
 color: var(--db-ink); font-weight: 600;
}

.db-table td.db-n, .db-table th.db-n {
 text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}

.db-table td.db-n {
 font-family: var(--db-font-mono);
}

.db-fact {
 padding: 9px 16px; border-right: 1px solid var(--db-line-soft); min-width: 0;
}

.db-fact:last-child {
 border-right: 0;
}

.db-fact .db-k {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--db-faint);
}

.db-fact .db-v {
 font-size: 13px; font-weight: 600; color: var(--db-ink); margin-top: 2px;
}

.db-fact .db-v .db-mono {
 font-weight: 500; font-size: 12px; color: var(--db-ink-2);
}

.db-fact .db-v.db-ok {
 color: var(--db-ok);
}

@media (max-width: 1360px) {
    :root {
 --db-rail-w: 264px;
    }
}

@media (max-width: 1160px) {
    :root {
 --db-nav-w: 212px;
    }
    .db-fact:nth-child(2) {
 border-right: 0;
    }
}

@media (max-width: 1024px) {
    .db-modstrip {
 grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.db-form {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px 16px;
    align-items: start;
}

.db-field {
 grid-column: span 6; min-width: 0;
}

.db-steplist {
 display: flex; flex-direction: column;
}

.db-stepitem {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 8px 7px 10px;
    border: 0;
    border-bottom: 1px solid var(--db-line-soft);
    border-left: 3px solid transparent;
    background: transparent;
    text-align: left;
    color: var(--db-ink-2);
}

.db-stepitem:hover {
 background: var(--db-surface);
}

@media (max-width: 1160px) {
    .db-field {
 grid-column: span 12;
    }
}

.db-stepno {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 20px;
    height: 20px;
    border: 1px solid var(--db-line);
    border-radius: 50%;
    background: var(--db-surface-2);
    font-family: var(--db-font-mono);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--db-muted);
}

@media (max-width: 1023px) {
    :root {
 --db-nav-w: 56px;
    }
}

@media (max-width: 767px) {
    .db-topbar {
 gap: 8px; padding: 0 8px;
    }
    .db-brand-name {
 display: none;
    }
    :root {
 --db-nav-w: 0px;
    }
    .db-cmdbar {
 height: 48px;
    }
    .db-cmdgroup-label {
 display: none;
    }
    .db-cmd {
 min-height: 44px;
    }
    .db-btn:not(.db-tiny) {
 min-height: 44px;
    }
    .db-statusbar {
 gap: 8px; padding: 0 10px; overflow: hidden;
    }
}