.popover {
    position: fixed; z-index: var(--z-overlay); border-radius: var(--len-14);
    border: 1px solid var(--ds-neutral-200); background-color: var(--white);
    padding: var(--len-6); box-shadow: var(--shadow-card); opacity: 0;
}

.is-placed.popover { opacity: 1; animation: pop var(--t-260) var(--e-emphasis) }
.is-exiting.popover { opacity: 0; transition: opacity var(--t-150) var(--e-out) }

.ms { display: flex; width: var(--fill); flex-direction: column; gap: var(--len-6) }

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

.ms-field:hover { border-color: var(--ogblue) }
.is-open.ms-field { border-color: var(--ogblue) }

.ms-inner {
    display: flex; min-width: 0; flex: 1; align-items: center; gap: var(--len-6);
    flex-wrap: nowrap; overflow: hidden;
}

.ms-pill { display: inline-flex; flex-shrink: 0; border-radius: var(--radius-pill) }
.ms-pill:focus-visible { outline: var(--len-2) solid var(--ogblue-30); outline-offset: 0 }

.ms-pill-chip {
    padding-block: var(--len-2); padding-right: var(--len-4); gap: var(--len-4);
    cursor: pointer; transition: background-color var(--t-150), color var(--t-150);
}

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

.ms-pill-x { width: var(--len-12); height: var(--len-12) }

.ms-more {
    flex-shrink: 0; font-family: var(--font-body); font-size: var(--fs-11);
    color: var(--charcoal-m);
}

.ms-search {
    min-width: 0; flex: 1; width: 0; flex-basis: 0; margin: 0; padding: var(--len-2) 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;
}

.ms-search::placeholder { color: var(--ds-tertiary) }
.ms-text-mode .ms-search { width: auto; flex-basis: auto }

.ms-placeholder {
    font-family: var(--font-body); font-size: var(--fs-12); color: var(--ds-tertiary);
}

.ms-text {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--font-body); font-size: var(--fs-12); color: var(--charcoal);
}

.ms-chevron {
    width: var(--len-16); height: var(--len-16); flex-shrink: 0; color: var(--charcoal-m);
    transition: transform var(--t-150);
}

.is-open .ms-chevron { transform: rotate(var(--turn-half)) }
.ms-panel { max-height: var(--len-288); overflow: hidden; padding: var(--len-8) }

.listbox { max-height: var(--len-208); overflow-y: auto }

.option {
    display: flex; width: var(--fill); align-items: center; gap: var(--len-8);
    border-radius: var(--len-10); padding: var(--len-8) var(--len-12); text-align: left;
    font-family: var(--font-body); font-size: var(--fs-12); line-height: var(--lh-13);
    color: var(--charcoal); transition: background-color var(--t-150);
}

.option:hover { background-color: var(--ds-overlay-hover) }
.is-active.option { background-color: var(--ds-overlay-hover) }

.option:disabled { pointer-events: none; color: var(--ds-disabled-content) }

.option-label {
    min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.option-check {
    width: var(--len-16); height: var(--len-16); flex-shrink: 0; color: var(--ogblue);
}

.option-heading {
    padding: var(--len-12) var(--len-12) var(--len-4); font-family: var(--font-body);
    font-size: var(--fs-13); font-weight: var(--weight-bold);
    letter-spacing: var(--track-wide); color: var(--charcoal-m);
}

.no-match {
    padding: var(--len-12); font-family: var(--font-body); font-size: var(--fs-12);
    color: var(--ds-tertiary);
}

.modal-layer {
    position: fixed; inset: 0; z-index: var(--z-overlay); display: flex;
    align-items: center; justify-content: center; padding: var(--len-16);
}

.scrim {
    position: absolute; inset: 0; background-color: var(--scrim);
    backdrop-filter: blur(var(--len-2)); opacity: 0;
    transition: opacity var(--t-200) var(--e-out);
}

.modal {
    position: relative; display: flex; max-height: var(--vh-modal); width: var(--fill);
    max-width: var(--len-448); flex-direction: column; border-radius: var(--len-20);
    background-color: var(--white); box-shadow: var(--shadow-card); outline: none;
    opacity: 0; transform: scale(var(--scale-097));
    transition: opacity var(--t-200) var(--e-out), transform var(--t-200) var(--e-out);
}

.modal-wide { max-width: var(--len-672); }
.is-entered .scrim { opacity: 1; }

.is-entered .modal { opacity: 1; transform: none; }

.modal-head {
    display: flex; align-items: center; gap: var(--len-12);
    padding: var(--len-24) var(--len-24) var(--len-16);
}

.modal-title {
    min-width: 0; flex: 1; font-family: var(--font-display); font-size: var(--fs-16);
    font-weight: var(--weight-heavy); line-height: var(--lh-13); color: var(--charcoal);
}

.modal-title-centre {
    display: block; text-align: center; font-size: var(--fs-24); line-height: var(--lh-115);
}

.modal-close {
    display: grid; width: var(--len-28); height: var(--len-28); flex-shrink: 0;
    place-items: center; border-radius: var(--radius-pill); color: var(--charcoal);
    transition: background-color var(--t-150);
}

.modal-close:hover { background-color: var(--ds-overlay-hover); }
.modal-close svg { width: var(--len-16); height: var(--len-16); }

.modal-body {
    min-height: 0; flex: 1; overflow-y: auto; padding: 0 var(--len-24) var(--len-24);
    font-size: var(--fs-13); line-height: var(--lh-15); color: var(--charcoal);
}

.modal-desc { margin: 0; }
.modal-desc + * { margin-top: var(--len-16); }

.modal-desc-centre {
    text-align: center; font-size: var(--fs-14); line-height: var(--lh-15);
    color: var(--charcoal-m);
}

.modal-foot {
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--len-10);
    padding: var(--len-8) var(--len-24) var(--len-24);
}

.toasts {
    position: fixed; bottom: var(--len-24); right: var(--len-24); z-index: var(--z-overlay);
    width: var(--fill); max-width: var(--len-362);
}

.toast-stack { position: relative; }

.toast-slot {
    position: absolute; inset-inline: 0; bottom: 0; display: block; width: var(--fill);
    text-align: left; pointer-events: none;
    transition: transform var(--t-200) var(--e-in-out), opacity var(--t-200) var(--e-in-out);
}

.is-front.toast-slot {
    pointer-events: auto; cursor: pointer; animation: pop var(--t-260) var(--e-emphasis);
}

.toast {
    display: flex; width: var(--fill); max-width: var(--len-362); flex-direction: column;
    align-items: flex-start; gap: var(--len-4); border-radius: var(--len-12);
    padding: var(--len-16); box-shadow: var(--shadow-card);
}

.toast-info { background-color: var(--ogblue-m); }
.toast-warning { background-color: var(--warn); }

.toast-success { background-color: var(--good); }
.toast-error { background-color: var(--bad); }

.toast-head { display: flex; align-items: center; gap: var(--len-8); color: var(--white); }
.toast-head svg { width: var(--len-16); height: var(--len-16); }

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

.toast-desc { font-size: var(--fs-12); line-height: var(--lh-15); color: var(--white-96); }