/*
 * Shared v2 components (BR Stage 1, S1Foundations and S1Chrome): buttons, fields, badges, chips, icons.
 * Class names start with ci- so they never meet today's Bootstrap styles.
 */
.ci-icon {
    width: 24px;
    height: 24px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ci-icon--sm { width: 18px; height: 18px; }

.ci-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Buttons: pill, 44 high (52 for large) */
.ci-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ci-s2);
    min-height: var(--ci-tap);
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--ci-r-pill);
    font: 600 14px/1.2 var(--ci-sans);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.ci-btn:focus-visible { outline: none; box-shadow: var(--ci-focus-ring); }
.ci-btn--primary { background: var(--ci-forest); color: var(--ci-white); }
.ci-btn--primary:hover { background: var(--ci-deep-forest); color: var(--ci-white); }
.ci-btn--secondary { background: transparent; border-color: var(--ci-forest); color: var(--ci-forest); }
.ci-btn--secondary:hover { background: var(--ci-moss); color: var(--ci-forest); }
.ci-btn--ai { background: var(--ci-clay); color: var(--ci-white); }
.ci-btn--ai:hover { background: var(--ci-clay-ink); color: var(--ci-white); }
.ci-btn--ai-soft { background: var(--ci-clay-tint); color: var(--ci-clay-ink); }
.ci-btn--on-dark { background: var(--ci-paper); color: var(--ci-deep-forest); }
.ci-btn--on-dark:hover { background: var(--ci-white); color: var(--ci-deep-forest); }
.ci-btn--on-dark-secondary { background: transparent; border-color: rgba(245, 241, 232, .4); color: var(--ci-paper); }
.ci-btn--on-dark-secondary:hover { border-color: var(--ci-paper); color: var(--ci-paper); }
.ci-btn--large { min-height: 52px; padding: 0 26px; font-size: 16px; }
.ci-btn:disabled,
.ci-btn[aria-disabled="true"] { background: var(--ci-line); border-color: var(--ci-line); color: var(--ci-disabled-text); cursor: not-allowed; }

/* "Visit website" and every other outbound button: the referral line sits under it */
.ci-outbound { display: inline-flex; flex-direction: column; align-items: center; gap: var(--ci-s1); }
.ci-outbound__note { font: var(--ci-caption); font-size: 11px; color: var(--ci-muted); }

.ci-link {
    color: var(--ci-forest);
    font-weight: 600;
    text-decoration: none;
}
.ci-link:hover { text-decoration: underline; color: var(--ci-forest); }

/* Fields */
.ci-field {
    width: 100%;
    min-height: 48px;
    padding: 0 var(--ci-s4);
    border: 1px solid var(--ci-field-border);
    border-radius: var(--ci-r-field);
    background: var(--ci-white);
    color: var(--ci-ink);
    font: var(--ci-body);
}
.ci-field:focus { outline: none; border-color: var(--ci-forest); box-shadow: var(--ci-focus-ring); }
.ci-field[aria-invalid="true"] { border-color: var(--ci-error-text); }
.ci-field-error { margin-top: var(--ci-s1); font: var(--ci-small); color: var(--ci-error-text); }

.ci-check {
    width: 22px;
    height: 22px;
    accent-color: var(--ci-forest);
}

.ci-toggle {
    position: relative;
    width: 44px;
    height: 26px;
    flex: none;
    appearance: none;
    border-radius: var(--ci-r-pill);
    background: var(--ci-field-border);
    cursor: pointer;
    transition: background-color .15s;
}
.ci-toggle::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ci-white);
    transition: transform .15s;
}
.ci-toggle:checked { background: var(--ci-forest); }
.ci-toggle:checked::after { transform: translateX(18px); }
.ci-toggle:focus-visible { outline: none; box-shadow: var(--ci-focus-ring); }

/* Pills (filter options) and chips (active filters) */
.ci-pill {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 var(--ci-s4);
    border: 1px solid var(--ci-field-border);
    border-radius: var(--ci-r-pill);
    background: transparent;
    color: var(--ci-ink);
    font: 500 14px/1.2 var(--ci-sans);
    cursor: pointer;
}
.ci-pill[aria-pressed="true"] { background: var(--ci-deep-forest); border-color: var(--ci-deep-forest); color: var(--ci-paper); }

.ci-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ci-s2);
    min-height: 32px;
    padding: 0 var(--ci-s3);
    border: 0;
    border-radius: var(--ci-r-pill);
    background: var(--ci-moss);
    color: var(--ci-deep-forest);
    font: 500 13px/1.2 var(--ci-sans);
}

/* Badges on cards */
.ci-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ci-s1);
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: var(--ci-r-pill);
    font: 600 12px/1.4 var(--ci-sans);
    white-space: nowrap;
}
.ci-badge--moss { background: var(--ci-moss); color: var(--ci-forest); }
.ci-badge--paper { background: var(--ci-paper); color: var(--ci-ink); }
.ci-badge--dark { background: var(--ci-deep-forest); color: var(--ci-paper); }
.ci-badge--outline { border-color: var(--ci-field-border); color: var(--ci-ink); }
.ci-badge--dashed { border: 1px dashed var(--ci-forest); color: var(--ci-forest); }
.ci-badge--warn { background: var(--ci-warn-tint); color: var(--ci-warn-text); }
.ci-badge--ai { background: var(--ci-clay); color: var(--ci-white); }
.ci-badge--ai-soft { background: var(--ci-clay-tint); color: var(--ci-clay-ink); }

/* Five-step levels: risk level (Lowest..Highest) and risk-return level (Very good..Very bad) */
.ci-level { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--ci-r-pill); font: 600 12px/1.4 var(--ci-sans); }
.ci-level__dots { letter-spacing: 1px; font-size: 10px; }
.ci-level--1 { background: var(--ci-level-1-tint); color: var(--ci-level-1-text); }
.ci-level--2 { background: var(--ci-level-2-tint); color: var(--ci-level-2-text); }
.ci-level--3 { background: var(--ci-level-3-tint); color: var(--ci-level-3-text); }
.ci-level--4 { background: var(--ci-level-4-tint); color: var(--ci-level-4-text); }
.ci-level--5 { background: var(--ci-level-5-tint); color: var(--ci-level-5-text); }
.ci-level--return { border: 1px solid var(--ci-line); background: transparent; color: var(--ci-ink); }  /* a return is neither good nor bad on its own */

/* Page width */
.ci-wrap {
    width: 100%;
    max-width: calc(var(--ci-content) + 2 * var(--ci-gutter));
    margin: 0 auto;
    padding: 0 var(--ci-gutter);
}