/* Musiveo chip input v1.1.0. Styles for musiveo-chip-input.js. Backgrounds black or #101010, neutral borders, no coloured fills or rings.
   It reads the shared foundation tokens (--musiveo-ui-surface, -border, -radius, -text, -muted) where components.css is loaded and falls back to the same values where it is not,
   so a chip field looks like every other Musiveo field. A form can restyle it by setting these on a parent: --mci-bg, --mci-border, --mci-text, --mci-muted, --mci-chip-bg, --mci-chip-border, --mci-accent. */
.mci {
    --mci-bg: var(--musiveo-ui-surface, #101010);
    --mci-border: var(--musiveo-ui-border, #2a2a2a);
    --mci-text: var(--musiveo-ui-text, #ffffff);
    --mci-muted: var(--musiveo-ui-muted, #a3a3a3);
    --mci-chip-bg: #000000;
    --mci-chip-border: #3f3f3f;
    --mci-accent: #ffffff;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 6px;
    background: var(--mci-bg);
    border: 1px solid var(--mci-border);
    border-radius: var(--musiveo-ui-radius, 0.75em);
    color: var(--mci-text);
    cursor: text;
    position: relative;
}
.mci:focus-within { border-color: var(--mci-accent); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16); }
.mci-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mci-chip { display: inline-flex; align-items: center; max-width: 100%; margin: 0; padding: 0 2px 0 10px; min-height: 30px; background: var(--mci-chip-bg); border: 1px solid var(--mci-chip-border); border-radius: 999px; color: var(--mci-text); font-size: 13px; line-height: 1; }
.mci-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.mci-chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 0 0 0 2px; padding: 0; background: transparent; border: 0; border-radius: 50%; color: var(--mci-muted); font-size: 18px; line-height: 1; cursor: pointer; }
.mci-chip-remove:hover, .mci-chip-remove:focus-visible { background: #262626; color: #ffffff; outline: none; }
.mci-chip-remove:focus-visible { box-shadow: 0 0 0 2px var(--mci-accent); }
.mci-row { flex: 1 1 120px; min-width: 100px; margin: 0; padding: 0; list-style: none; }
/* Forms and themes style every input; the typing field inside the chip box must stay plain, and the original input must stay hidden. */
html body div.mci input.mci-entry[type="text"] { display: block !important; width: 100% !important; min-height: 30px; height: auto !important; margin: 0 !important; padding: 4px 6px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; color: var(--mci-text) !important; font: inherit; font-size: 14px; line-height: 1.4; }
input[data-musiveo-chips][hidden] { display: none !important; }
div.mci input.mci-entry::placeholder { color: var(--mci-muted); opacity: 0.8; }
div.mci input.mci-entry:disabled { display: none; }
.mci-note { display: block; margin: 6px 2px 0; color: var(--mci-muted); font-size: 12px; }
.mci-note[hidden] { display: none; }
.mci-live { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
@media (max-width: 480px) { .mci-chip-text { max-width: 170px; } .mci-chip-remove { width: 30px; height: 30px; } }

/* Labels and help around a chip field (shared by every publish form). */
.mci-optional { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid #3f3f3f; border-radius: 999px; color: #a3a3a3; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.6; text-transform: none; vertical-align: middle; }
.mci-help { margin: 6px 2px 0; color: #a3a3a3; font-size: 12px; line-height: 1.5; }
.mci-help strong { color: #ffffff; font-weight: 600; }
.mci-help--box { margin: 8px 0 0; padding: 10px 12px; background: #000000; border: 1px solid #262626; border-radius: 10px; }