/* pages.css — Shared page-shell tokens & primitives for non-editor, non-landing pages.
 * Re-uses the same design vocabulary as landing.css / header.css / footer.css:
 *   pure-neutral charcoal surfaces, mint accent, IBM Plex Sans + Plex Mono.
 *
 * Scope: any element wrapped in `.qb-page` adopts these tokens. The editor
 * intentionally does NOT use this scope — it keeps its own CSS untouched. */

/* =====================================================================
   Token scope — applied via .qb-page wrapper (data-carbon-theme="g100")
   ===================================================================== */
.qb-page {
    /* Surfaces — pure neutral charcoal */
    --cds-background:           #0A0A0A;
    --cds-background-hover:     #161616;
    --cds-background-active:    #1F1F1F;
    --cds-layer-01:             #141414;
    --cds-layer-02:             #1C1C1C;
    --cds-layer-03:             #242424;
    --cds-layer-hover-01:       #1C1C1C;
    --cds-layer-hover-02:       #242424;
    --cds-field-01:             #141414;
    --cds-field-02:             #1C1C1C;

    /* Borders */
    --cds-border-subtle-00:     #1F1F1F;
    --cds-border-subtle-01:     #2A2A2A;
    --cds-border-subtle-02:     #3A3A3A;
    --cds-border-strong-01:     #4D4D4D;

    /* Text */
    --cds-text-primary:         #FFFFFF;
    --cds-text-secondary:       #EDEDED;
    --cds-text-helper:          #B5B5B5;
    --cds-text-placeholder:     #797979;
    --cds-text-on-color:        #04231A;
    --cds-text-disabled:        #4D4D4D;

    /* Brand — mint accent */
    --cds-button-primary:           #65D6A5;
    --cds-button-primary-hover:     #84E0BA;
    --cds-button-primary-active:    #4DBE8E;
    --cds-button-tertiary:          #65D6A5;
    --cds-button-tertiary-hover:    #84E0BA;
    --cds-button-tertiary-active:   #4DBE8E;
    --cds-button-danger-primary:    #C25450;
    --cds-link-primary:             #65D6A5;
    --cds-link-primary-hover:       #84E0BA;
    --cds-interactive:              #65D6A5;
    --cds-focus:                    #65D6A5;
    --cds-border-interactive:       #65D6A5;

    /* Status (numeric only) */
    --cds-support-success:      #4FA875;
    --cds-support-error:        #C25450;
    --cds-support-warning:      #D4B248;

    /* Convenience aliases for our custom rules */
    --qb-mint:        var(--cds-button-primary);
    --qb-mint-hover:  var(--cds-button-primary-hover);
    --qb-mint-soft:   rgba(101, 214, 165, 0.14);
    --qb-mint-ink:    #04231A;
    --qb-bg:          var(--cds-background);
    --qb-elev-1:      var(--cds-layer-01);
    --qb-elev-2:      var(--cds-layer-02);
    --qb-elev-3:      var(--cds-layer-03);
    --qb-rule:        var(--cds-border-subtle-00);
    --qb-rule-2:      var(--cds-border-subtle-01);
    --qb-rule-hi:     var(--cds-border-subtle-02);
    --qb-text:        var(--cds-text-primary);
    --qb-text-soft:   var(--cds-text-secondary);
    --qb-text-dim:    var(--cds-text-helper);
    --qb-text-faint:  var(--cds-text-placeholder);
    --qb-text-ghost:  var(--cds-text-disabled);
    --qb-up:          var(--cds-support-success);
    --qb-down:        var(--cds-support-error);
    --qb-warn:        var(--cds-support-warning);

    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    color: var(--qb-text-soft);
    background: var(--qb-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* When .qb-page is present, take over body bg and remove globals */
body:has(.qb-page) { background: var(--qb-bg); }
body:has(.qb-page)::before,
body:has(.qb-page)::after { display: none; }

.qb-page h1,
.qb-page h2,
.qb-page h3,
.qb-page h4 {
    font-family: "IBM Plex Sans", sans-serif;
    color: var(--qb-text);
    letter-spacing: -0.01em;
    line-height: 1.15;
    font-variation-settings: normal;
    font-weight: 600;
}

.qb-page ::selection { background: var(--qb-mint); color: var(--qb-mint-ink); }

/* Hide undefined Carbon custom elements until JS loads */
.qb-page cds-button:not(:defined),
.qb-page cds-link:not(:defined),
.qb-page cds-tile:not(:defined),
.qb-page cds-tag:not(:defined),
.qb-page cds-text-input:not(:defined),
.qb-page cds-checkbox:not(:defined),
.qb-page cds-modal:not(:defined),
.qb-page cds-loading:not(:defined),
.qb-page cds-progress-bar:not(:defined),
.qb-page cds-table:not(:defined),
.qb-page cds-table-head:not(:defined),
.qb-page cds-table-body:not(:defined),
.qb-page cds-table-row:not(:defined),
.qb-page cds-table-header-row:not(:defined),
.qb-page cds-table-cell:not(:defined),
.qb-page cds-table-header-cell:not(:defined),
.qb-page cds-line-chart:not(:defined),
.qb-page cds-area-chart:not(:defined),
.qb-page cds-bar-chart-simple:not(:defined) { visibility: hidden; }

/* =====================================================================
   Container — 1240px cap, 32px gutter desktop / 16px mobile
   ===================================================================== */
.qb-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
    width: 100%;
}
.qb-container--narrow { max-width: 760px; }
.qb-container--wide   { max-width: 1240px; }
@media (max-width: 720px) { .qb-container { padding: 0 16px; } }

/* =====================================================================
   Page section rhythm
   ===================================================================== */
.qb-page__main { padding: 64px 0 96px; }
.qb-page__main--compact { padding: 48px 0 64px; }
.qb-page__main--center {
    padding: 56px 0 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
}

@media (max-width: 720px) {
    .qb-page__main { padding: 40px 0 64px; }
    .qb-page__main--center { padding: 40px 0 56px; min-height: calc(100vh - 160px); }
}

/* =====================================================================
   Page head — kicker / title / lede (used by _page_head.html partial)
   ===================================================================== */
.qb-head {
    margin-bottom: 40px;
    max-width: 760px;
}
.qb-head--center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.qb-head--center .qb-head__kicker { justify-content: center; }
.qb-head--center .qb-head__lede { margin-left: auto; margin-right: auto; }

.qb-head__kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--qb-mint);
    margin-bottom: 16px;
}
.qb-head__kicker::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}
.qb-head__title {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
    font-size: clamp(1.875rem, 4vw, 2.625rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--qb-text);
    margin: 0;
    text-wrap: balance;
}
.qb-head__title em { font-style: normal; color: var(--qb-mint); }
.qb-head__lede {
    margin: 14px 0 0;
    color: var(--qb-text-dim);
    font-size: 1rem;
    line-height: 1.55;
    max-width: 60ch;
}
.qb-head__meta {
    margin-top: 12px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    color: var(--qb-text-faint);
    letter-spacing: 0.02em;
}
.qb-head__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

@media (max-width: 720px) {
    .qb-head { margin-bottom: 28px; }
    .qb-head__title { font-size: 1.875rem; }
}

/* =====================================================================
   Card — neutral surface used for forms, content blocks
   ===================================================================== */
.qb-card {
    background: var(--qb-elev-1);
    border: 1px solid var(--qb-rule-2);
    padding: 28px;
}
.qb-card--padded { padding: 32px; }
.qb-card--tight  { padding: 20px; }
.qb-card--accent { border-color: var(--qb-rule-hi); }
.qb-card--danger { border-color: rgba(194, 84, 80, 0.4); background: rgba(194, 84, 80, 0.04); }
.qb-card--warn   { border-color: rgba(212, 178, 72, 0.4); background: rgba(212, 178, 72, 0.04); }

.qb-card__title {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--qb-text);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}
.qb-card__lede {
    color: var(--qb-text-dim);
    font-size: 13px;
    line-height: 1.55;
    margin: 0 0 20px;
}

/* =====================================================================
   Section heading — larger nested headings inside content
   ===================================================================== */
.qb-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
}
.qb-section-head__bar {
    width: 3px;
    height: 18px;
    background: var(--qb-mint);
    flex-shrink: 0;
}
.qb-section-head__title {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--qb-text);
    letter-spacing: -0.01em;
    margin: 0;
}
.qb-section-head__count {
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    background: var(--qb-elev-2);
    border: 1px solid var(--qb-rule-2);
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    color: var(--qb-text-faint);
}

.qb-section-divider {
    height: 1px;
    background: var(--qb-rule);
    margin: 40px 0;
    border: 0;
}

/* =====================================================================
   Form controls (native input/select/textarea inside .qb-page)
   ===================================================================== */
.qb-field { display: block; margin-bottom: 18px; }
.qb-field:last-child { margin-bottom: 0; }
.qb-field__label {
    display: block;
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--qb-text-faint);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.qb-field__hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--qb-text-faint);
    line-height: 1.5;
}
.qb-field__error {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--qb-down);
}

.qb-page input[type="text"],
.qb-page input[type="email"],
.qb-page input[type="password"],
.qb-page input[type="number"],
.qb-page input[type="date"],
.qb-page input[type="search"],
.qb-page input[type="tel"],
.qb-page select,
.qb-page textarea,
.qb-input {
    width: 100%;
    height: 40px;
    padding: 0 14px;
    background: var(--qb-elev-1);
    border: 1px solid var(--qb-rule-2);
    color: var(--qb-text);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    transition: border-color 0.12s ease, background-color 0.12s ease;
    box-sizing: border-box;
    border-radius: 0;
}
.qb-page textarea {
    height: auto;
    min-height: 120px;
    padding: 12px 14px;
    resize: vertical;
}
.qb-page input::placeholder,
.qb-page textarea::placeholder { color: var(--qb-text-faint); }
.qb-page input:focus,
.qb-page select:focus,
.qb-page textarea:focus {
    outline: 2px solid var(--qb-mint);
    outline-offset: -2px;
    border-color: var(--qb-mint);
    background: var(--qb-elev-2);
}
.qb-input--mono { font-family: "IBM Plex Mono", "JetBrains Mono", monospace; font-feature-settings: "tnum"; }
.qb-input--code {
    font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
    font-size: 1.5rem;
    text-align: center;
    letter-spacing: 0.4em;
    height: 56px;
}

.qb-input-group {
    position: relative;
    display: flex;
    align-items: center;
}
.qb-input-group .qb-input { padding-right: 40px; }
.qb-input-group__suffix {
    position: absolute;
    right: 14px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    color: var(--qb-text-faint);
    pointer-events: none;
}

.qb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .qb-row { grid-template-columns: 1fr; } }

/* Checkbox (native) */
.qb-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    color: var(--qb-text-dim);
    font-size: 13px;
    line-height: 1.55;
    padding: 12px 0;
}
.qb-check input[type="checkbox"] {
    margin: 2px 0 0;
    width: 16px;
    height: 16px;
    accent-color: var(--qb-mint);
    flex-shrink: 0;
}
.qb-check:hover { color: var(--qb-text-soft); }
.qb-check a { color: var(--qb-mint); text-decoration: none; }
.qb-check a:hover { color: var(--qb-mint-hover); text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   Button (native fallback when not using cds-button)
   ===================================================================== */
.qb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--qb-text);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    box-sizing: border-box;
    min-width: 120px;
    border-radius: 0;
}
.qb-btn:focus-visible { outline: 2px solid var(--qb-mint); outline-offset: -3px; }
.qb-btn--primary {
    background: var(--qb-mint);
    color: var(--qb-mint-ink);
    border-color: var(--qb-mint);
    font-weight: 500;
}
.qb-btn--primary:hover { background: var(--qb-mint-hover); border-color: var(--qb-mint-hover); }
.qb-btn--secondary {
    background: var(--qb-elev-2);
    color: var(--qb-text);
    border-color: var(--qb-rule-2);
}
.qb-btn--secondary:hover { background: var(--qb-elev-3); border-color: var(--qb-rule-hi); }
.qb-btn--ghost {
    background: transparent;
    color: var(--qb-text-soft);
    border-color: var(--qb-rule-2);
}
.qb-btn--ghost:hover { background: var(--qb-elev-1); color: var(--qb-text); }
.qb-btn--danger {
    background: transparent;
    color: var(--qb-down);
    border-color: rgba(194, 84, 80, 0.4);
}
.qb-btn--danger:hover { background: rgba(194, 84, 80, 0.12); border-color: var(--qb-down); }
.qb-btn--full { width: 100%; }
.qb-btn--icon {
    min-width: 0;
    width: 40px;
    padding: 0;
}

/* =====================================================================
   Tag / pill (compact label)
   ===================================================================== */
.qb-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    background: var(--qb-elev-2);
    border: 1px solid var(--qb-rule-2);
    color: var(--qb-text-dim);
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    text-transform: lowercase;
    white-space: nowrap;
}
.qb-tag--mint   { color: var(--qb-mint);   background: var(--qb-mint-soft); border-color: rgba(101, 214, 165, 0.32); }
.qb-tag--up     { color: var(--qb-up);     background: rgba(79, 168, 117, 0.10); border-color: rgba(79, 168, 117, 0.32); }
.qb-tag--down   { color: var(--qb-down);   background: rgba(194, 84, 80, 0.10);  border-color: rgba(194, 84, 80, 0.32); }
.qb-tag--warn   { color: var(--qb-warn);   background: rgba(212, 178, 72, 0.10); border-color: rgba(212, 178, 72, 0.32); }
.qb-tag__dot { width: 6px; height: 6px; background: currentColor; border-radius: 0; flex-shrink: 0; }

/* =====================================================================
   Empty state
   ===================================================================== */
.qb-empty {
    border: 1px dashed var(--qb-rule-2);
    background: rgba(20, 20, 20, 0.4);
    padding: 56px 24px;
    text-align: center;
}
.qb-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--qb-mint-soft);
    color: var(--qb-mint);
    margin-bottom: 18px;
}
.qb-empty__icon svg { width: 22px; height: 22px; display: block; }
.qb-empty__title {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--qb-text);
    margin: 0 0 6px;
}
.qb-empty__lede {
    color: var(--qb-text-dim);
    font-size: 13px;
    line-height: 1.55;
    max-width: 44ch;
    margin: 0 auto 22px;
}

/* =====================================================================
   Pagination — minimal, inline
   ===================================================================== */
.qb-pagination {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 24px auto 0;
    border: 1px solid var(--qb-rule-2);
}
.qb-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    background: transparent;
    color: var(--qb-text-faint);
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.qb-pagination__link + .qb-pagination__link { border-left: 1px solid var(--qb-rule-2); }
.qb-pagination__link:hover { background: var(--qb-elev-2); color: var(--qb-text); }
.qb-pagination__link--active { background: var(--qb-mint-soft); color: var(--qb-mint); }
.qb-pagination__wrap { display: flex; justify-content: center; }

/* =====================================================================
   Stat pills (small numeric tiles)
   ===================================================================== */
.qb-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}
@media (max-width: 720px) { .qb-stats { grid-template-columns: 1fr; } }
.qb-stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 18px 22px;
    background: var(--qb-elev-1);
    border: 1px solid var(--qb-rule-2);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
.qb-stat:hover { border-color: var(--qb-rule-hi); background: var(--qb-elev-2); }
.qb-stat__label {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    color: var(--qb-text-faint);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.qb-stat__value {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 500;
    font-size: 1.875rem;
    line-height: 1;
    color: var(--qb-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    text-transform: capitalize;
}

/* =====================================================================
   Sidebar nav (settings, profile-style two-pane)
   ===================================================================== */
.qb-sidebar-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
@media (max-width: 720px) {
    .qb-sidebar-layout { grid-template-columns: 1fr; gap: 24px; }
}

.qb-sidenav {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--qb-rule-2);
    background: var(--qb-elev-1);
}
.qb-sidenav__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: var(--qb-text-dim);
    font-size: 13px;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.qb-sidenav__link + .qb-sidenav__link { border-top: 1px solid var(--qb-rule); }
.qb-sidenav__link:hover { background: var(--qb-elev-2); color: var(--qb-text); }
.qb-sidenav__link--active {
    background: var(--qb-elev-2);
    color: var(--qb-text);
    border-left-color: var(--qb-mint);
}
.qb-sidenav__link svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.85; }
.qb-sidenav__link--danger { color: rgba(194, 84, 80, 0.85); }
.qb-sidenav__link--danger:hover { background: rgba(194, 84, 80, 0.08); color: var(--qb-down); }

@media (max-width: 720px) {
    .qb-sidenav {
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
    }
    .qb-sidenav__link {
        border-left: 0;
        border-bottom: 2px solid transparent;
        flex-shrink: 0;
    }
    .qb-sidenav__link + .qb-sidenav__link {
        border-top: 0;
        border-left: 1px solid var(--qb-rule);
    }
    .qb-sidenav__link--active {
        border-left-color: transparent;
        border-bottom-color: var(--qb-mint);
    }
}

/* =====================================================================
   Code block (used in help/mcp + anywhere code is shown)
   ===================================================================== */
.qb-code {
    display: block;
    background: var(--qb-elev-1);
    border: 1px solid var(--qb-rule-2);
    color: var(--qb-text-soft);
    font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
    font-size: 13px;
    line-height: 1.65;
    padding: 18px 22px;
    overflow-x: auto;
    white-space: pre;
    margin: 0;
    -webkit-overflow-scrolling: touch;
}
.qb-code code {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: transparent;
    padding: 0;
}
.qb-code-caption {
    display: block;
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    color: var(--qb-text-faint);
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.qb-inline-code {
    font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
    font-size: 0.875em;
    background: var(--qb-elev-2);
    border: 1px solid var(--qb-rule-2);
    padding: 1px 6px;
    color: var(--qb-text);
}

/* =====================================================================
   Mint link — inline anchor styled with brand color
   ===================================================================== */
.qb-link {
    color: var(--qb-mint);
    text-decoration: none;
    transition: color 0.12s ease;
}
.qb-link:hover {
    color: var(--qb-mint-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* =====================================================================
   Lock overlay (used when free-tier feature is gated)
   ===================================================================== */
.qb-lock {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 10, 0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    text-decoration: none;
    color: inherit;
}
.qb-lock__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.qb-lock__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--qb-mint-soft);
    color: var(--qb-mint);
    border: 1px solid rgba(101, 214, 165, 0.3);
    transition: border-color 0.15s ease;
}
.qb-lock:hover .qb-lock__icon { border-color: var(--qb-mint); }
.qb-lock__label {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    color: var(--qb-mint);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* =====================================================================
   Final CTA section (re-usable footer band, mirrors landing.qb-cta)
   ===================================================================== */
.qb-final-cta {
    border-top: 1px solid var(--qb-rule);
    padding: 80px 0;
    text-align: center;
}
.qb-final-cta__title {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
    font-size: clamp(1.625rem, 3.5vw, 2.25rem);
    line-height: 1.12;
    letter-spacing: -0.018em;
    margin: 0 auto 16px;
    max-width: 28ch;
    color: var(--qb-text);
    text-wrap: balance;
}
.qb-final-cta__title em { font-style: normal; color: var(--qb-mint); }
.qb-final-cta__lede {
    color: var(--qb-text-dim);
    font-size: 0.9375rem;
    margin: 0 auto 28px;
    max-width: 50ch;
    line-height: 1.55;
}
@media (max-width: 720px) { .qb-final-cta { padding: 56px 0; } }

/* =====================================================================
   KPI Hero — dominant headline number with secondary cell grid
   (used on backtest results)
   ===================================================================== */
.qb-kpi-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    background: var(--qb-elev-1);
    border: 1px solid var(--qb-rule-2);
    margin-bottom: 32px;
    overflow: hidden;
}
.qb-kpi-hero__primary {
    padding: 40px 44px;
    border-right: 1px solid var(--qb-rule);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.qb-kpi-hero__label {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--qb-text-faint);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.qb-kpi-hero__value {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
    font-size: clamp(2.75rem, 6vw, 4rem);
    line-height: 1;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums slashed-zero;
    color: var(--qb-text);
}
.qb-kpi-hero__value--up   { color: var(--qb-up); }
.qb-kpi-hero__value--down { color: var(--qb-down); }
.qb-kpi-hero__unit {
    font-size: 0.5em;
    font-weight: 500;
    margin-left: 0.06em;
    letter-spacing: 0;
    opacity: 0.75;
}
.qb-kpi-hero__sub {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 22px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    color: var(--qb-text-faint);
}
.qb-kpi-hero__sub strong {
    color: var(--qb-text-soft);
    font-weight: 500;
}
.qb-kpi-hero__sub em {
    font-style: normal;
    color: var(--qb-text-ghost);
}

.qb-kpi-hero__cells {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.qb-kpi-hero__cell {
    padding: 24px;
    border-bottom: 1px solid var(--qb-rule);
}
.qb-kpi-hero__cell:nth-child(odd)  { border-right: 1px solid var(--qb-rule); }
.qb-kpi-hero__cell:nth-last-child(-n+2) { border-bottom: 0; }
.qb-kpi-hero__cell-label {
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    font-weight: 500;
    color: var(--qb-text-faint);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.qb-kpi-hero__cell-value {
    margin-top: 10px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--qb-text);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.qb-kpi-hero__cell-value--up   { color: var(--qb-up); }
.qb-kpi-hero__cell-value--down { color: var(--qb-down); }

@media (max-width: 900px) {
    .qb-kpi-hero { grid-template-columns: 1fr; }
    .qb-kpi-hero__primary { border-right: 0; border-bottom: 1px solid var(--qb-rule); padding: 32px 24px; }
}
@media (max-width: 480px) {
    .qb-kpi-hero__cells { grid-template-columns: 1fr; }
    .qb-kpi-hero__cell { border-right: 0 !important; }
    .qb-kpi-hero__cell:not(:last-child) { border-bottom: 1px solid var(--qb-rule); }
}

/* Compact KPI tile (secondary metric row) */
.qb-kpi-tile {
    background: var(--qb-elev-1);
    border: 1px solid var(--qb-rule-2);
    padding: 18px 22px;
}
.qb-kpi-tile__label {
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    font-weight: 500;
    color: var(--qb-text-faint);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.qb-kpi-tile__value {
    margin-top: 8px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--qb-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.qb-kpi-tile__value--up   { color: var(--qb-up); }
.qb-kpi-tile__value--down { color: var(--qb-down); }

/* =====================================================================
   Chart shell — frame around an ECharts/Carbon Charts container
   ===================================================================== */
.qb-chart {
    background: var(--qb-elev-1);
    border: 1px solid var(--qb-rule-2);
    padding: 24px;
    margin-bottom: 20px;
}
.qb-chart__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.qb-chart__title {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--qb-text-dim);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}
.qb-chart__meta {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    color: var(--qb-text-faint);
    letter-spacing: 0.04em;
}
.qb-chart__canvas {
    width: 100%;
    min-height: 200px;
    position: relative;
}
.qb-chart__canvas--tall { height: 360px; }
.qb-chart__canvas--mid  { height: 220px; }

/* Carbon Charts colour overrides — force our Mint/Bear palette on the
   internal SVG paths regardless of theme handling. The CDN-bundled
   @carbon/charts can apply its own line colour from the theme palette
   before honouring the `color.scale` option, so we lock it down via
   CSS. Targets both old (.bx--) and new (.cds--) Carbon prefixes.
   Both charts are AreaCharts (line + filled area) so they share the
   same visual language. */
#equity-chart .cds--cc--line .line,
#equity-chart .cds--cc--line path.line,
#equity-chart .bx--cc--line .line,
#equity-chart .bx--cc--line path.line,
#equity-chart .cds--cc--area .area-stroke,
#equity-chart .bx--cc--area .area-stroke {
    stroke: #65D6A5 !important;
    stroke-width: 2px !important;
}
#equity-chart .cds--cc--area .area,
#equity-chart .cds--cc--area path.area,
#equity-chart .bx--cc--area .area,
#equity-chart .bx--cc--area path.area {
    fill: rgba(101, 214, 165, 0.32) !important;
}
#drawdown-chart .cds--cc--line .line,
#drawdown-chart .cds--cc--line path.line,
#drawdown-chart .bx--cc--line .line,
#drawdown-chart .bx--cc--line path.line,
#drawdown-chart .cds--cc--area .area-stroke,
#drawdown-chart .bx--cc--area .area-stroke {
    stroke: #C25450 !important;
    stroke-width: 2px !important;
}
#drawdown-chart .cds--cc--area .area,
#drawdown-chart .cds--cc--area path.area,
#drawdown-chart .bx--cc--area .area,
#drawdown-chart .bx--cc--area path.area {
    fill: rgba(194, 84, 80, 0.32) !important;
}
/* Carbon's chart-holder needs to fill the canvas div so the SVG plot
   area gets a real height to draw into. */
.qb-chart__canvas .cds--chart-holder,
.qb-chart__canvas .bx--chart-holder {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
}

/* =====================================================================
   Status panel (pending/queued/running)
   ===================================================================== */
.qb-status {
    background: var(--qb-elev-1);
    border: 1px solid var(--qb-rule-2);
    padding: 56px 32px;
    text-align: center;
}
.qb-status__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--qb-mint-soft);
    color: var(--qb-mint);
    border: 1px solid rgba(101, 214, 165, 0.3);
    margin-bottom: 20px;
}
.qb-status__icon svg { width: 22px; height: 22px; }
.qb-status__text {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 14px;
    color: var(--qb-text-soft);
    margin: 0 0 18px;
}
.qb-status__progress {
    height: 4px;
    width: min(320px, 100%);
    margin: 0 auto;
    background: var(--qb-elev-3);
    overflow: hidden;
}
.qb-status__progress-bar {
    height: 100%;
    background: var(--qb-mint);
    width: 0%;
    transition: width 0.4s ease;
}
.qb-status__pct {
    margin-top: 8px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    color: var(--qb-text-faint);
    letter-spacing: 0.04em;
}
.qb-status__warning {
    margin-top: 24px;
    padding: 12px 16px;
    border: 1px solid rgba(212, 178, 72, 0.32);
    background: rgba(212, 178, 72, 0.08);
    color: var(--qb-warn);
    font-size: 12px;
    text-align: left;
    line-height: 1.55;
}
.qb-status__warning a {
    color: var(--qb-warn);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* =====================================================================
   Native data table (qb-table) — minimal, scoped to .qb-page
   ===================================================================== */
.qb-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--qb-rule-2);
    background: var(--qb-elev-1);
    -webkit-overflow-scrolling: touch;
}
.qb-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 13px;
}
.qb-table thead th {
    text-align: left;
    padding: 12px 16px;
    background: var(--qb-elev-2);
    border-bottom: 1px solid var(--qb-rule-hi);
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    font-weight: 500;
    color: var(--qb-text-faint);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}
.qb-table tbody td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--qb-rule);
    color: var(--qb-text-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.qb-table tbody tr:last-child td { border-bottom: 0; }
.qb-table tbody tr:hover td { background: rgba(255, 255, 255, 0.012); }
.qb-table .qb-table__num {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
}
.qb-table .qb-table__idx { color: var(--qb-text-ghost); }
.qb-table .qb-table__up   { color: var(--qb-up); }
.qb-table .qb-table__down { color: var(--qb-down); }
.qb-table .qb-table__dim  { color: var(--qb-text-faint); }

/* Mobile stacked card view companion (qb-trade-card) */
.qb-trade-cards { display: none; }
.qb-trade-card {
    background: var(--qb-elev-1);
    border: 1px solid var(--qb-rule);
    padding: 14px;
    margin-bottom: 8px;
}
.qb-trade-card__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
}
.qb-trade-card__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    color: var(--qb-text-soft);
}
.qb-trade-card__row + .qb-trade-card__row { margin-top: 6px; }
.qb-trade-card__label {
    color: var(--qb-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
}

@media (max-width: 720px) {
    .qb-table-wrap { display: none; }
    .qb-trade-cards { display: block; }
}

/* =====================================================================
   Monte Carlo summary grid
   ===================================================================== */
.qb-mc {
    background: rgba(101, 214, 165, 0.04);
    border: 1px solid rgba(101, 214, 165, 0.22);
    padding: 24px;
    margin-bottom: 20px;
}
.qb-mc__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}
.qb-mc__title {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--qb-mint);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}
.qb-mc__meta {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    color: var(--qb-text-faint);
}
.qb-mc__lede {
    color: var(--qb-text-dim);
    font-size: 12px;
    line-height: 1.55;
    margin: 0 0 18px;
}
.qb-mc__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 720px) { .qb-mc__grid { grid-template-columns: 1fr; } }
.qb-mc__cell {
    background: var(--qb-elev-1);
    border: 1px solid var(--qb-rule-2);
    padding: 14px 16px;
}
.qb-mc__cell--up   { border-color: rgba(79, 168, 117, 0.32);  background: rgba(79, 168, 117, 0.06); }
.qb-mc__cell--down { border-color: rgba(194, 84, 80, 0.32);  background: rgba(194, 84, 80, 0.06); }
.qb-mc__cell-label {
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    color: var(--qb-text-faint);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.qb-mc__cell-value {
    margin-top: 8px;
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--qb-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.qb-mc__cell-value--up   { color: var(--qb-up); }
.qb-mc__cell-value--down { color: var(--qb-down); }
.qb-mc__cell-sub {
    margin-top: 4px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    color: var(--qb-text-faint);
}

/* =====================================================================
   Inline data-source pill (read-only chip used on run.html)
   ===================================================================== */
.qb-source-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.qb-source {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--qb-elev-2);
    border: 1px solid var(--qb-rule-2);
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    color: var(--qb-text-soft);
}
.qb-source__tf {
    padding: 1px 6px;
    background: var(--qb-elev-3);
    border: 1px solid var(--qb-rule);
    font-size: 10px;
    color: var(--qb-text-faint);
    letter-spacing: 0.04em;
}

/* =====================================================================
   Form button row (used at the bottom of run.html)
   ===================================================================== */
.qb-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}
.qb-form-actions cds-button { min-width: 0; }
@media (max-width: 480px) {
    .qb-form-actions { flex-direction: column; }
    .qb-form-actions > * { width: 100%; }
}

/* =====================================================================
   Locked teaser surface (greyed Pro-only block)
   ===================================================================== */
.qb-locked-surface {
    position: relative;
    background: var(--qb-elev-1);
    border: 1px solid var(--qb-rule-2);
    padding: 24px;
    margin-bottom: 20px;
    min-height: 220px;
}
.qb-locked-surface__placeholder {
    opacity: 0.28;
    pointer-events: none;
    user-select: none;
}