/* Add-to-list circle button — loaded after styles.css so these rules win. */

.add-list-button {
    width: 38px;
    height: 38px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--rust);
    border-radius: 999px;
    background: var(--paper-raised);
    color: var(--rust);
    cursor: pointer;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    transform-origin: center center;
}

.add-list-button .add-list-glyph--plus {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-1px);
}

.add-list-glyph--arrow,
.add-list-glyph--check {
    width: 18px;
    height: 18px;
    flex: none;
}

.add-list-glyph--plus,
.add-list-glyph--arrow,
.add-list-glyph--check {
    display: none;
}

/* Idle: white circle, blue + */
.add-list-button[data-list-state="idle"] {
    background: var(--paper-raised);
    border-color: var(--rust);
    color: var(--rust);
}

.add-list-button[data-list-state="idle"] .add-list-glyph--plus {
    display: block;
}

.add-list-button[data-list-state="idle"]:hover {
    background: var(--paper-raised);
    border-color: var(--rust-dark);
    color: var(--rust-dark);
}

/* Queued: cyan circle (first click), white up arrow */
.add-list-button[data-list-state="queued"] {
    background: var(--color-status-verified);
    border-color: var(--color-status-verified-dark);
    color: var(--on-accent);
}

.add-list-button[data-list-state="queued"] .add-list-glyph--arrow {
    display: block;
}

.add-list-button[data-list-state="queued"]:hover {
    background: var(--color-status-verified-dark);
    border-color: var(--color-status-verified-dark);
    color: var(--on-accent);
}

/* Primary: orange circle (second click), white checkmark */
.add-list-button[data-list-state="primary"] {
    background: var(--color-status-phone);
    border-color: var(--color-status-phone-dark);
    color: var(--on-accent);
}

.add-list-button[data-list-state="primary"] .add-list-glyph--check {
    display: block;
}

.add-list-button[data-list-state="primary"]:hover {
    background: var(--color-status-phone-dark);
    border-color: var(--color-status-phone-dark);
    color: var(--on-accent);
}

.add-list-button:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.add-list-button--small {
    width: 32px;
    height: 32px;
    border-width: 1px;
}

.add-list-button--small .add-list-glyph--plus {
    font-size: 1.3rem;
}

.add-list-button--small .add-list-glyph--arrow,
.add-list-button--small .add-list-glyph--check {
    width: 15px;
    height: 15px;
}