/* QuantitySelector styles. These used to be an inline <style> block inside the
   component, re-sent with every instance on every page. Linked once in each
   app's head (Portal, Nebula, MainWebsite), last, so they keep the precedence
   the inline block had over the app's other stylesheets. */

/* Segmented stepper: [ − | value | + ] in one bordered control.
   Colors come from theme tokens so it reads correctly in both modes. */
.quantity-control {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--quicktie-border-color);
    border-radius: 0.5rem;
    background: var(--quicktie-body-bg);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .quantity-control:focus-within {
        border-color: color-mix(in srgb, var(--qt-accent, #009AA6) 60%, transparent);
        box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--qt-accent, #009AA6) 15%, transparent);
    }

.quantity-btn {
    width: 32px;
    min-height: 32px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
    color: var(--quicktie-body-color);
    background: var(--quicktie-tertiary-bg);
    transition: background 0.12s ease, color 0.12s ease;
}

    .quantity-btn:first-child { border-right: 1px solid var(--quicktie-border-color); }
    .quantity-btn:last-child { border-left: 1px solid var(--quicktie-border-color); }

    .quantity-btn:hover:not(:disabled) {
        background: var(--qt-accent, #009AA6);
        color: #fff;
    }

    .quantity-btn:active:not(:disabled) {
        background: var(--qt-accent-strong, #006B73);
        color: #fff;
    }

    .quantity-btn:disabled {
        opacity: 0.35;
        cursor: not-allowed;
    }

.quantity-value {
    width: 44px;
    text-align: center;
    font-weight: 700;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    border: none;
    background: transparent;
    color: var(--quicktie-body-color);
    -moz-appearance: textfield;
}

    .quantity-value:focus {
        outline: none;
        background: var(--quicktie-tertiary-bg);
    }

    .quantity-value::-webkit-inner-spin-button,
    .quantity-value::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .quantity-value:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }