/**
 * TiorAI Engine – Temperature Converter – Tool-specific CSS
 *
 * Styles for the temperature converter tool.
 * Depends on te-base.css for shared tokens and component styles.
 *
 * @package TiorAI_Engine
 */

/* ==========================================================================
   Temperature inputs layout
   ========================================================================== */

.te-temperature-converter__inputs {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.te-temperature-converter__input-group {
    display: flex;
    flex-direction: column;
}

.te-temperature-converter__input {
    width: 100%;
}

/* ==========================================================================
   Error message styling
   ========================================================================== */

.te-temperature-converter__error {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: var(--te-color-alert-text, #92400e);
    background-color: var(--te-color-alert-bg, #fef3c7);
    border: 1px solid var(--te-color-alert-border, #fde68a);
    border-radius: var(--te-radius, 4px);
    padding: 0.375rem 0.625rem;
}

.te-temperature-converter__error[hidden] {
    display: none;
}

/* ==========================================================================
   Responsive layout
   ========================================================================== */

@media (min-width: 640px) {
    .te-temperature-converter__inputs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}