.btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    min-width: var(--len-80);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: var(--len-8);
    border-radius: var(--radius-pill);
    padding: var(--len-10) var(--len-16);
    font-family: var(--font-body);
    font-size: var(--fs-12);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-13);
    letter-spacing: var(--track-btn);
    color: var(--charcoal);
    transition: color var(--t-150), background-color var(--t-150), border-color var(--t-150);
}

.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--radius-pill);
    transition: background-color var(--t-150);
}

.btn:hover::before { background-color: var(--ds-overlay-hover); }
.btn:active::before { background-color: var(--ds-overlay-pressed); }

.btn:disabled { pointer-events: none; color: var(--ds-disabled-content); }
.btn:disabled::before { background-color: transparent; }

.btn-label { display: inline-flex; align-items: center; gap: var(--len-8); }
.btn-accent { background-color: var(--hl); }

.btn-accent:disabled { background-color: var(--ds-disabled-bg); }
.btn-primary { background-color: var(--ogblue-m); color: var(--white); }

.btn-primary:disabled { background-color: var(--ds-disabled-bg); color: var(--ds-disabled-content); }
.btn-secondary { background-color: var(--ds-neutral-100); }

.btn-secondary:disabled { background-color: var(--ds-disabled-bg); }
.btn-outline { border: 1px solid var(--ds-outline); }

.btn-outline:disabled { border-color: var(--ds-outline-disabled); }
.btn-ghost { background-color: transparent; }

.btn-full { width: var(--fill); }
.btn-bad { color: var(--bad-ink); }

.ibtn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    width: var(--len-32);
    height: var(--len-32);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    color: var(--charcoal);
    transition: color var(--t-150), background-color var(--t-150), border-color var(--t-150);
}

.ibtn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--radius-pill);
    transition: background-color var(--t-150);
}

.ibtn:hover::before { background-color: var(--ds-overlay-hover); }
.ibtn:active::before { background-color: var(--ds-overlay-pressed); }

.ibtn:disabled { pointer-events: none; color: var(--ds-disabled-content); }
.ibtn:disabled::before { background-color: transparent; }

.ibtn svg { width: var(--len-16); height: var(--len-16); }
.ibtn-accent { background-color: var(--hl); }

.ibtn-primary { background-color: var(--ogblue-m); color: var(--white); }
.ibtn-secondary { background-color: var(--ds-neutral-100); }

.ibtn-outline { border: 1px solid var(--ds-outline); }
.ibtn-ghost { background-color: transparent; }

.pill {
    display: inline-flex;
    min-height: var(--len-24);
    width: fit-content;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    padding: var(--len-4) var(--len-12);
    font-family: var(--font-display);
    font-size: var(--fs-12);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-13);
    letter-spacing: var(--track-pill);
    white-space: nowrap;
}

.pill-inline {
    min-height: var(--len-20);
    padding: var(--len-2) var(--len-8);
    font-size: var(--fs-11);
    line-height: var(--lh-12);
    letter-spacing: 0;
}

.pill-neutral { background-color: var(--ds-neutral-100); color: var(--ds-secondary); }
.pill-yellow { background-color: var(--ds-yellow-light); color: var(--ds-yellow-strong); }

.pill-green { background-color: var(--ds-green-light); color: var(--ds-green-strong); }
.pill-red { background-color: var(--ds-red-light); color: var(--ds-red-strong); }

.pill-blue { background-color: var(--ds-blue-lightest); color: var(--ogblue-m); }
.pill-purple { background-color: var(--ds-purple-light); color: var(--ds-purple-strong); }

.pill-outline { border: 1px solid var(--ds-neutral-200); background-color: var(--white); color: var(--ds-secondary); }

.callout {
    display: flex;
    width: var(--fill);
    align-items: flex-start;
    gap: var(--len-12);
    border-radius: var(--len-12);
    padding: var(--len-13) var(--len-16);
    text-align: left;
}

.callout-info { background-color: var(--ds-blue-lightest); }
.callout-info .callout-icon { color: var(--ogblue); }

.callout-good { background-color: var(--good-bg); }
.callout-good .callout-icon { color: var(--good-ink); }

.callout-good .callout-desc-colour { color: var(--good-ink); }
.callout-warn { background-color: var(--warn-bg); }

.callout-warn .callout-icon { color: var(--warn-ink); }
.callout-bad { background-color: var(--bad-bg); }

.callout-bad .callout-icon { color: var(--bad-ink); }
.callout-icon { width: var(--len-20); height: var(--len-20); flex-shrink: 0; }

.callout-body { min-width: 0; flex: 1; }

.callout-title {
    font-family: var(--font-display);
    font-size: var(--fs-14);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-13);
    color: var(--charcoal);
}

.callout-desc { font-family: var(--font-body); font-size: var(--fs-12); line-height: var(--lh-13); color: var(--ds-secondary); }
.callout-title + .callout-desc { margin-top: var(--len-2); }

.callout-act {
    display: flex;
    width: var(--len-36);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    align-self: center;
    color: var(--charcoal-m);
}

.callout-act svg { width: var(--len-20); height: var(--len-20); }
.card { border-radius: var(--len-20); border: 1px solid var(--line); background-color: var(--white); padding: var(--len-20); }

.surface { border-radius: var(--len-20); border: 1px solid var(--line); background-color: var(--ds-lighter); padding: var(--len-16); }
.field { display: flex; width: var(--fill); flex-direction: column; gap: var(--len-6); }

.field-box {
    display: flex;
    height: var(--len-32);
    align-items: center;
    gap: var(--len-8);
    border-radius: var(--radius-pill);
    border: 1px solid var(--ds-neutral-200);
    background-color: var(--white);
    padding-inline: var(--len-12);
    transition: border-color var(--t-150);
}

.field-box:focus-within { border-color: var(--ogblue); }
.field-box:has(.input:disabled) { background-color: var(--ds-lighter); opacity: var(--dim-50); }

.field-icon { width: var(--len-16); height: var(--len-16); flex-shrink: 0; color: var(--ds-tertiary); }

.input {
    min-width: 0;
    flex: 1;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--fs-12);
    line-height: var(--lh-13);
    color: var(--charcoal);
    outline: none;
}

.input::placeholder { color: var(--ds-tertiary); }
.input:disabled { cursor: not-allowed; color: var(--ds-disabled-content); }

.tip { position: relative; display: inline-flex; }

.tip-panel {
    position: absolute;
    bottom: var(--fill);
    left: var(--half);
    transform: translateX(var(--half-back));
    margin-bottom: var(--len-6);
    z-index: var(--z-overlay);
    max-width: var(--len-224);
    border-radius: var(--len-8);
    background-color: var(--charcoal);
    padding: var(--len-4) var(--len-8);
    font-family: var(--font-body);
    font-size: var(--fs-12);
    line-height: var(--lh-135);
    color: var(--cream);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-100) var(--e-out);
}

.tip:hover .tip-panel,
.tip:focus-within .tip-panel { opacity: 1; }