.pills {
display: grid;
gap: 0.45rem;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.pills legend {
margin-bottom: 0.35rem;
padding: 0;
font-weight: 800;
color: var(--ink-pink-2);
}
.pills-hint {
margin-top: -0.2rem;
}
.pills-search {
width: 100%;
min-height: 40px;
padding: 0.45rem 0.9rem;
border: 1.5px solid var(--line-pink-8);
border-radius: 999px;
background: var(--surface-pink-9);
}
.pills-list {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.pill-choice {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-height: 40px;
padding: 0.35rem 0.9rem;
border: 1.5px solid var(--line-pink-8);
border-radius: 999px;
background: var(--surface-neutral-9);
color: var(--ink-pink-3);
font-weight: 700;
line-height: 1.2;
cursor: pointer;
user-select: none;
}
.pill-choice[hidden] {
display: none;
}
.pill-choice input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.pill-choice small {
font-weight: 600;
opacity: 0.8;
}
.pill-choice:hover {
border-color: var(--line-pink-7);
}
.pill-choice:focus-within {
outline: 3px solid var(--line-pink-7);
outline-offset: 2px;
}
.pill-choice.on {
border-color: var(--line-green-2);
background: var(--surface-green-2);
color: var(--ink-neutral-9);
}
.pill-choice.on.rosa {
border-color: var(--line-pink-4);
background: var(--surface-pink-4);
}
.pill-choice.on.amarelo {
border-color: var(--line-amber-3);
background: var(--surface-amber-3);
}
.pill-create {
border-style: dashed;
border-color: var(--line-pink-7);
background: var(--surface-pink-9);
color: var(--ink-pink-3);
font: inherit;
font-weight: 800;
}
.pills-create-box {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.5rem;
padding: 0.7rem;
border: 1.5px dashed var(--line-pink-7);
border-radius: 16px;
background: var(--surface-pink-9);
}
.pills-create-box label {
display: grid;
gap: 0.2rem;
font-size: 0.85rem;
font-weight: 700;
}
.pills-create-box input {
min-height: 38px;
}
.process-bar .process-pick {
flex: 1 1 240px;
}
.toolbar-pills {
flex: 1 1 100%;
}
.toolbar-pills legend {
font-size: 0.85rem;
}
.pills-create-box .emoji {
width: 4.5rem;
text-align: center;
}