/*
    "What's My BSA?" — one customer's page, so the stylesheet ships with the module rather than going
    into the shared base theme. Colours come from the theme's design tokens, so a re-skin carries it.
*/
.mb-bsa { max-width: 44rem; margin: var(--mb-space-6, 2rem) auto; padding: 0 var(--mb-space-4, 1rem); }
.mb-bsa__title { text-align: center; margin-bottom: var(--mb-space-3, .75rem); }
.mb-bsa__lede { text-align: center; color: var(--mb-color-text-muted, #4b535d); margin-bottom: var(--mb-space-6, 2rem); }

.mb-bsa__field { margin-bottom: var(--mb-space-5, 1.5rem); border: 0; padding: 0; }
.mb-bsa__label { display: block; font-weight: 600; margin-bottom: var(--mb-space-2, .5rem); }
.mb-bsa__optional { font-weight: 400; color: var(--mb-color-text-muted, #4b535d); font-size: .875rem; }
.mb-bsa__radio { display: inline-flex; align-items: center; gap: .4rem; margin-right: var(--mb-space-4, 1rem); }

.mb-bsa__input {
    width: 100%;
    /* 2.75rem is the touch floor, and this is typed standing up holding a rifle. 16px stops iOS
       zooming the page on focus, which on a form this short throws the layout about. */
    min-height: 2.75rem;
    padding: .5rem .75rem;
    font-size: 16px;
    border: 1px solid var(--mb-color-border-strong, #cbd0d6);
    border-radius: var(--mb-radius-md, 3px);
    background: #fff;
}
.mb-bsa__input:focus-visible { outline: 2px solid var(--mb-color-focus, #1865ed); outline-offset: 1px; }
.mb-bsa__hint { margin: .35rem 0 0; font-size: .875rem; color: var(--mb-color-text-muted, #4b535d); }
.mb-bsa__submit { width: 100%; min-height: 2.75rem; }

.mb-bsa__result { margin-top: var(--mb-space-6, 2rem); }
.mb-bsa__result[hidden] { display: none; }
.mb-bsa__message { font-weight: 600; margin-bottom: var(--mb-space-4, 1rem); }
.mb-bsa__nudge { margin-top: var(--mb-space-3, .75rem); color: var(--mb-color-text-muted, #4b535d); font-size: .9375rem; }

.mb-bsa__matches { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mb-space-3, .75rem); }
.mb-bsa__match {
    display: flex; flex-direction: column; gap: .15rem;
    padding: var(--mb-space-4, 1rem);
    border: 1px solid var(--mb-color-border, #e2e5e9);
    border-radius: var(--mb-radius-md, 3px);
    background: var(--mb-color-surface, #f7f8f9);
}
.mb-bsa__model { font-weight: 600; }
.mb-bsa__calibre, .mb-bsa__dates { color: var(--mb-color-text-muted, #4b535d); font-size: .9375rem; }

/* The picture grid, used only where a photograph is what tells two models apart. */
.mb-bsa__matches--gallery { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.mb-bsa__shot {
    display: block;
    /* The box is reserved here rather than by the image, whose dimensions are not known until it
       lands — otherwise the results reflow one photograph at a time as they arrive. */
    aspect-ratio: 4 / 3;
    margin-bottom: .5rem;
    background: #fff;
    border-radius: var(--mb-radius-md, 3px);
    overflow: hidden;
}
.mb-bsa__shot img { width: 100%; height: 100%; object-fit: contain; display: block; }

@media (min-width: 600px) {
    .mb-bsa__submit { width: auto; min-width: 12rem; }
}

/*
    THE THUMBNAIL LAYOUT, for a match that carries a photograph outside the gallery. Until the merchant
    could upload pictures the only place one could appear was the gallery, so a single photograph on a
    single answer had nowhere to go but full width — which on a 44rem column is a picture four inches
    tall above two lines of text. Here it rides beside the model name instead, and the gallery keeps the
    big squares for the case it is actually for: choosing between rifles by eye.
*/
.mb-bsa__matches:not(.mb-bsa__matches--gallery) .mb-bsa__match--shot {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    grid-template-rows: auto;
    column-gap: var(--mb-space-4, 1rem);
    align-items: start;
}
.mb-bsa__matches:not(.mb-bsa__matches--gallery) .mb-bsa__match--shot .mb-bsa__shot {
    grid-row: 1 / -1;
    margin-bottom: 0;
}

/*
    "View spares" — the reason somebody looked their rifle up in the first place. A link rather than a
    button element: it goes to a page, and the browser's own middle-click and open-in-new-tab are worth
    more than the styling. 2.75rem is the touch floor; this is tapped on a phone in a shed.
*/
.mb-bsa__spares {
    display: inline-flex;
    align-items: center;
    align-self: start;
    justify-content: center;
    min-height: 2.75rem;
    margin-top: var(--mb-space-3, .75rem);
    padding: .4rem 1rem;
    border: 1px solid currentColor;
    border-radius: var(--mb-radius-md, 3px);
    color: var(--mb-color-primary, #1865ed);
    font-weight: 600;
    text-decoration: none;
}
.mb-bsa__spares:hover { color: var(--mb-color-primary-dark, #11458f); text-decoration: underline; }
.mb-bsa__spares:focus-visible { outline: 2px solid var(--mb-color-focus, #1865ed); outline-offset: 2px; }
.mb-bsa__matches--gallery .mb-bsa__spares { margin-top: var(--mb-space-2, .5rem); align-self: stretch; }

/*
    The link's accessible name. Five cards all reading "View spares" tell a screen-reader user nothing
    about which rifle each one is for, so the visible words stay short and the real name carries the
    model. clip-path rather than display:none — a hidden element has no accessible name at all.
*/
.mb-bsa__sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}