/* =======================================================================
   Meter Identification – app-specific styles
   Global element spacing (headings, paragraphs, labels, inputs) comes from
   /css/40-typography.css.  Component spacing comes from /css/30-components.css.
   This file covers only patterns unique to this app.
   ======================================================================= */


/* ===================================================================== */
/*  APP CONTAINER                                                         */
/* ===================================================================== */

/* Vertical padding for the app container */
.mi-main {
    padding-top:    var(--space-lg);
    padding-bottom: var(--space-lg);
}

/* Reserve vertical space to reduce layout shift between steps.
   The tallest question view (retrofit, 3 cards) is ~600px. */
#meter-app {
    min-height: 70vh;
}


/* ===================================================================== */
/*  QUESTION HEADING                                                      */
/* ===================================================================== */

/* Stable block even when text length varies */
#meter-app h2 {
    min-height: 2.4em;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ===================================================================== */
/*  SELECTABLE CARD IMAGES                                                */
/* ===================================================================== */

/* Fixed slot so cards don't reflow when images load */
#meter-app .kw-option img {
    min-height: 140px;
    object-fit: contain;
}


/* ===================================================================== */
/*  RESULT VIEW                                                           */
/* ===================================================================== */

/* Image wrapper: space below the result image */
.mi-result-img-wrap {
    margin-bottom: var(--space-lg);
}

/* The result image itself */
.mi-result-img {
    max-width: 250px;
    min-height: 180px;
    height: auto;
    object-fit: contain;
}

/* Start-over / action buttons row */
.mi-actions {
    margin-top: var(--space-lg);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* Back button row */
.mi-back {
    margin-top: var(--space-md);
}


/* ===================================================================== */
/*  RESPONSIVE                                                            */
/* ===================================================================== */

@media (max-width: 480px) {
    #meter-app        { min-height: 70vh; }
    #meter-app h2     { min-height: 3.2em; } /* wraps to more lines on narrow screens */
}

/* ===================================================================== */
/*  RESULT LISTS – no bullets, left accent border                        */
/* ===================================================================== */

#meter-app ul {
    list-style: none;
    padding: 0;
}

#meter-app li {
    padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
    border-left: 3px solid var(--kw-blue-tint);
    margin-bottom: var(--space-sm);
}