/* Silver Memories Brand CSS — derived from Brand Styleguide v1.1 */

:root {
    --sm-teal:       #3A7684;
    --sm-teal-dark:  #2C5A66;  /* hover/active teal, and teal text on --sm-aqua-tint */
    --sm-teal-deep:  #14343B;  /* the shadow layer in entertainment_text.svg; --sm-orange text passes AA on it (5.4:1) */
    --sm-aqua:       #87D0D0;
    --sm-aqua-tint:  #ABDEDE;
    --sm-aqua-pale:  #E3F5F5;  /* aqua accent that still reads on a teal ground */
    --sm-sand:       #D4C9BF;
    --sm-sand-light: #ede8e3;
    --sm-coral:      #D46C56;
    /* Brand coral reaches only 3.45:1 on paper — under AA for text, and under it again as a
       button fill behind white text. These two are the same hue carried far enough to pass:
       --sm-coral-ink for anything bearing or being small text, --sm-coral itself for borders,
       tints and large decorative fills. */
    --sm-coral-ink:  #B5452E;
    --sm-coral-dark: #A63D27;
    --sm-orange:     #EC8E3F;
    --sm-yellow:     #FFCC00;
    --sm-ink:        #1F1F1F;
    --sm-ink-soft:   #4a4a4a;
    --sm-paper:      #FFFFFF;
    --sm-bg:         #f8f6f4;

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;

    /* ── Small-text scale ─────────────────────────────────────
       Pick by role, not by look:
         --fs-xs   badges, chips, micro-labels
         --fs-sm   helper text, hints, validation, captions
         --fs-base body copy, form labels, inputs — the floor inside a form

       fs-sm's ceiling must stay below fs-base's fixed 16px, or helper text and body copy render
       at the same size on any viewport past the clamp's ~750px crossover — that's what happened
       before this was tightened to 14→15px.

       Inputs carry no font-size; they inherit --fs-base. Do not add one. */
    --fs-xs:   clamp(0.8125rem, 0.7857rem + 0.119vw, 0.875rem);  /* 13 → 14px */
    --fs-sm:   clamp(0.875rem, 0.8482rem + 0.119vw, 0.9375rem);  /* 14 → 15px */
    --fs-base: 1rem;                                             /* 16px */

    /* One focus ring for the whole app. Aqua was the original choice and reaches only 1.76:1
       against white — under the 3:1 WCAG 2.2 asks of a focus indicator — which is why half a dozen
       components had each grown a teal override of their own. Teal is 5.12:1 on white and on
       --sm-bg. Surfaces that are themselves teal (site header, footer, hero, admin sidebar)
       re-declare --sm-focus as paper; it inherits, so anything focused inside them picks it up. */
    --sm-focus: var(--sm-teal);

    /* ── Heading scale ───────────────────────────────────────
       Applied to .sm-public-site h1-h6 in site.css. Sized to land where Bootstrap's reboot
       already put these at desktop width, so nothing jumps, with a deliberate floor on a phone
       in place of RFS's. Admin keeps Bootstrap's own scale.
         --fs-h1  page title
         --fs-h2  major section band (home page, modal titles)
         --fs-h3  card or panel title
         --fs-h4  section heading inside a card — see .sm-subhead
       Never inline a size in razor: pick the tier, or add one here. */
    --fs-h1: clamp(1.75rem, 1.375rem + 1.5vw, 2.5rem);
    --fs-h2: clamp(1.5rem, 1.325rem + 0.9vw, 2rem);
    --fs-h3: 1.4rem;
    --fs-h4: 1.15rem;
    --fs-h5: 1.05rem;
    --fs-h6: var(--fs-base);

    /* ── Spacing ─────────────────────────────────────────────
       Every gap, padding and margin should come from here. The steps are the ones the design
       already used most; the odd 0.35/0.45/0.65rem values that predate this scale are being
       snapped to it as their components are touched. */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;

    /* ── Radii ───────────────────────────────────────────────
         xs  chips, inline badges       md  inputs, image frames, alerts
         sm  nav links, small tiles     lg  panels
         card  cards and modals         pill  buttons and pills */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   10px;
    --radius-card: 12px;
    --radius-pill: 999px;

    /* ── Motion ──────────────────────────────────────────────
       fast: colour swaps on hover. base: anything that moves or resizes. slow: page-level
       transitions such as the home header fading to glass. Honoured by the
       prefers-reduced-motion block at the foot of this file. */
    /* Height of a .sm-form-input, derived from the field's own line-height, padding and border
       rather than measured off a screenshot. Anything that has to stand beside a field uses it. */
    --control-height: calc(1.5rem + 1.2rem + 3px);

    --t-fast: 0.15s;
    --t-base: 0.2s;
    --t-slow: 0.35s;

    /* ── Elevation and glow ──────────────────────────────────
       Mixed from --sm-teal rather than written as a literal: the rgba() values these replaced
       were rgb(60, 117, 132), two points off the actual brand teal of rgb(58, 118, 132), so
       every card shadow on the site was tinted with a colour that is not in the palette. */
    --shadow-card:       0 2px 12px color-mix(in srgb, var(--sm-teal) 10%, transparent);
    --shadow-card-hover: 0 6px 24px color-mix(in srgb, var(--sm-teal) 18%, transparent);
    --shadow-header:     0 1px 6px  color-mix(in srgb, var(--sm-teal) 7%, transparent);
    --glow-input:        0 0 0 3px  color-mix(in srgb, var(--sm-teal) 15%, transparent);
}

/* ── Typography ───────────────────────────────────────────── */
/* body and h1-h6 rules live in site.css, scoped to .sm-public-site. */

/* Heading accent */
/* Playfair at book weight. Named .heading-italic until 2026-09-12, which said the opposite of
   what it does: the rule turns italic off. */
.heading-display {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 400;
}

.heading-semibold {
    font-family: var(--font-display);
    font-weight: 600;
}
/* ── Buttons ────────────────────────────────────
   One pill shape shared by every variant; a variant sets colour and nothing else. This used to be
   six near-identical blocks, each restating the same fourteen declarations, and they had drifted
   apart: three heights (40px, 44px, 52px), two label sizes, and three unrelated hover languages —
   a ring that appeared, a fill that swapped, and a brightness filter. Hover now always darkens the
   surface, so every button on the site answers the pointer the same way, and focus is left to the
   one ring in this file rather than a per-button box-shadow.

   Height floor is 44px, the WCAG 2.1 AA target size; the hero variant is the only one that grows. */
.btn-sm-primary,
.btn-sm-outline,
.btn-sm-danger,
.btn-sm-primary-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    padding: 0.65rem 1.75rem;
    min-height: 44px;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--t-base), border-color var(--t-base), color var(--t-base);
}

.btn-sm-primary {
    color: var(--sm-paper);
    background-color: var(--sm-teal);
    border-color: var(--sm-teal);
}

.btn-sm-primary:hover {
    color: var(--sm-paper);
    background-color: var(--sm-teal-dark);
    border-color: var(--sm-teal-dark);
}

.btn-sm-outline {
    color: var(--sm-teal);
    background-color: transparent;
    border-color: var(--sm-teal);
}

.btn-sm-outline:hover {
    color: var(--sm-paper);
    background-color: var(--sm-teal);
}

.btn-sm-danger {
    color: var(--sm-paper);
    background-color: var(--sm-coral-ink);
    border-color: var(--sm-coral-ink);
}

.btn-sm-danger:hover {
    color: var(--sm-paper);
    background-color: var(--sm-coral-dark);
    border-color: var(--sm-coral-dark);
}

/* The home-page call to action: the same pill one size up, in coral. */
.btn-sm-primary-hero {
    font-size: var(--fs-base);
    padding: 0.85rem 2.25rem;
    min-height: 52px;
    color: var(--sm-paper);
    background-color: var(--sm-coral-ink);
    border-color: var(--sm-coral-ink);
}

.btn-sm-primary-hero:hover {
    color: var(--sm-paper);
    background-color: var(--sm-coral-dark);
    border-color: var(--sm-coral-dark);
}

/* Modal close button */
.btn-sm-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--fs-h5);
    line-height: 1;
    padding: 0.2rem 0.4rem;
    color: var(--sm-ink-soft);
    border-radius: var(--radius-xs);
    transition: color var(--t-fast), background-color var(--t-fast);
    text-decoration: none;
}

.btn-sm-close:hover {
    color: var(--sm-ink);
    background-color: color-mix(in srgb, var(--sm-ink) 7%, transparent);
}

/* ── Text-style buttons ─────────────────────────────
   A link that performs an action rather than navigating. Both used to set their hover colour to
   the colour they already had, so neither responded to the pointer at all. */
.btn-sm-ghost,
.btn-link-danger {
    font-family: var(--font-body);
    font-weight: 600;
    background: none;
    border: none;
    padding: var(--sp-1) 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.btn-sm-ghost { color: var(--sm-teal); }
.btn-sm-ghost:hover { color: var(--sm-teal-dark); }

/* Same shape, coral, for a destructive action. */
.btn-link-danger { color: var(--sm-coral-ink); }
.btn-link-danger:hover { color: var(--sm-coral-dark); }

/* ── Focus rings ──────────────────────────────────────────── */

:focus-visible {
    outline: 3px solid var(--sm-focus);
    outline-offset: 2px;
}

/* ── Type badges ──────────────────────────────────────────── */

.type-badge {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--sm-teal-dark);
    background-color: var(--sm-aqua-tint);
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.75rem;
    margin: 0.125rem;
    white-space: nowrap;
}

/* ── Cards ────────────────────────────────────────────────── */

.sm-card {
    background: var(--sm-paper);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.sm-card:hover {
    box-shadow: var(--shadow-card-hover);
}

/* ── Act type segmented toggle ────────────────────────────── */

.sm-act-type-toggle {
    display: inline-flex;
    border: 1.5px solid var(--sm-teal);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.sm-act-type-btn {
    padding: 0.5rem 1.75rem;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--sm-teal);
    cursor: pointer;
    transition: background-color var(--t-fast), color var(--t-fast);
    min-height: 44px;
    touch-action: manipulation;
    line-height: 1;
}

.sm-act-type-btn + .sm-act-type-btn {
    border-left: 1.5px solid var(--sm-teal);
}

.sm-act-type-btn.selected {
    background-color: var(--sm-teal);
    color: var(--sm-paper);
}

.sm-act-type-btn:not(.selected):hover {
    background-color: var(--sm-aqua-tint);
}

/* ── Entertainment type chips ─────────────────────────────── */

.sm-type-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sm-type-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--sm-teal);
    background: transparent;
    color: var(--sm-teal);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--t-fast), color var(--t-fast);
    user-select: none;
    -webkit-user-select: none;
    min-height: 44px;
    touch-action: manipulation;
}

.sm-type-chip:hover {
    background-color: var(--sm-aqua-tint);
}

.sm-type-chip.selected {
    background-color: var(--sm-teal);
    color: var(--sm-paper);
}

.sm-type-chip.selected:hover {
    filter: brightness(0.92);
}

/* ── Forms ────────────────────────────────────────────────── */

.sm-form-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-base);
    color: var(--sm-ink);
    margin-bottom: 0.25rem;
    display: block;
}

/* "Optional" qualifier inside a label or a section heading. Not italic: the smaller size, the
   lighter weight and the muted colour already set it apart, and italic sat badly against the
   Playfair headings on the photos and online-presence steps. */
.sm-form-label-optional {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--sm-ink-soft);
}

/* Helper text under a field. Always use this class — never inline a size. */
.sm-form-help {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--sm-ink-soft);
    margin-top: 0.35rem;
    margin-bottom: 0;
}

.sm-form-input,
.sm-form-select {
    font-family: var(--font-body);
    width: 100%;
    border: 1.5px solid var(--sm-sand);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.85rem;
    color: var(--sm-ink);
    background-color: var(--sm-paper);
    transition: border-color var(--t-base), box-shadow var(--t-base);
}

.sm-form-input:focus,
.sm-form-select:focus {
    border-color: var(--sm-teal);
    box-shadow: var(--glow-input);
    outline: none;
}

.form-check-input:checked {
    background-color: var(--sm-teal);
    border-color: var(--sm-teal);
}

.sm-form-input.invalid {
    border-color: var(--sm-coral);
}

/* Field-level error message */
.sm-validation-msg {
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.5;
    color: var(--sm-coral-ink);
    margin-top: 0.25rem;
}

/* Image upload */
.image-drop-zone {
    position: relative; /* containing block for .image-drop-zone-prompt::after */
    border: 2px dashed var(--sm-teal);
    border-radius: var(--radius-md);
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    background-color: var(--sm-bg);
    transition: background-color var(--t-base);
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.image-drop-zone:hover {
    background-color: var(--sm-aqua-tint);
}

.image-drop-zone.drag-over {
    background-color: var(--sm-aqua-tint);
    border-color: var(--sm-teal);
}

/* The real input is clipped to a pixel, so the browser's own focus ring lands somewhere
   invisible. Draw it on the zone the input sits in instead — :focus-visible above can't do this,
   because the focus is on a descendant. */
.image-drop-zone:focus-within {
    outline: 3px solid var(--sm-focus);
    outline-offset: 2px;
    background-color: var(--sm-aqua-tint);
}

.image-drop-zone p,
.image-drop-zone-prompt {
    margin: 0;
    color: var(--sm-ink-soft);
    font-size: var(--fs-base);
}

/* The whole zone is the click target, but only this label is a <label> - so stretch it over the
   zone instead of wrapping it, which would put flow content inside a phrasing-only element. */
.image-drop-zone-prompt {
    display: block;
    cursor: pointer;
}

.image-drop-zone-prompt::after {
    content: "";
    position: absolute;
    inset: 0;
}

.image-drop-zone .icon {
    color: var(--sm-teal);
    margin-bottom: 0.75rem;
    line-height: 0;
}

/* Visually hidden, NOT display:none. The file input has to stay in the tab order or there is no
   keyboard route to the picker at all - a <label> cannot take focus, so the input is the only
   thing a keyboard user can reach. */
.hidden-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Wide enough for a "Make main photo" button to read on one or two lines, so two tiles still
   fit across a narrow phone. */
/* One photo per row, each either its crop editor or the collapsed tile below - not a grid of
   thumbnails, since every photo can be a full editor now rather than at most one at a time. */
/* Three collapsed tiles per row, centred - wrapping naturally centres a shorter last row (e.g. two
   photos) too, since justify-content works per line, not across the whole list. An open editor
   (.is-editing) is full-width regardless, via flex-basis, so it never shares a row. */
.image-editor-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.image-editor-item.is-editing {
    flex: 1 1 100%;
}

/* Narrow, unlike the full-width editor - a collapsed tile is a result to glance at, not something
   that needs the width of the page. Sized so three sit comfortably across the card. */
.image-editor-collapsed {
    width: 158px;
}

.image-thumbnail {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid var(--sm-sand);
    background-color: white;
    cursor: pointer;
    transition: border-color var(--t-base), box-shadow var(--t-base);
}

.image-thumbnail:hover {
    border-color: var(--sm-aqua);
}

.image-thumbnail.is-main {
    border-color: var(--sm-teal);
    box-shadow: 0 0 0 2px var(--sm-teal);
    cursor: default;
}

/* Square on purpose: it must match .sm-card-img-wrap, so the tile is a true preview of the
   directory card rather than an arbitrary letterbox of the same photo. */
.image-thumbnail-frame {
    position: relative;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    overflow: hidden;
}

/* Absolutely positioned, so the photo is out of flow and cannot size the frame. In flow, an
   `img { height: 100% }` against an indefinite height falls back to its intrinsic height and wins
   over aspect-ratio - which made every portrait photo, i.e. most headshots, a tall rectangle.
   Everything else - size, offset, and the rest of the inset - comes from CropStyles.PreviewStyle
   (inline, computed from the crop rect), the same technique as .sm-crop-preview img, and the rule
   is deliberately this bare: object-fit and a stylesheet width/height both fought that inline style
   in turn. object-fit: cover re-fit the image's content to cover its (deliberately oversized) box
   independent of the inline offset, pinning the visible crop to centre whatever was picked; a
   width/height pair then squared off every non-square photo, because the frame is square and the
   photo is not. */
.image-thumbnail-frame img {
    position: absolute;
    display: block;
}

.image-thumbnail-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background-color: var(--sm-teal);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-xs);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.2;
}

.image-editor-collapsed-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

/* ── Focal point picker ───────────────────────────────────── */
/* Shared by the register flow and the admin editor (CropPicker.razor). */

.sm-crop-editor {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--sm-sand);
    border-radius: var(--radius-lg);
    background-color: var(--sm-sand-light);
}

.sm-crop-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-base);
    margin: 0 0 1rem;
}

.sm-crop-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 1.25rem;
    align-items: start;
}

.sm-crop-grid-single {
    grid-template-columns: minmax(0, 1fr);
}

.sm-crop-stage-col {
    min-width: 0;
}

/* Square, with the photo contained in the middle: the crop square may zoom out past the photo's
   shorter side, so the stage needs room on that axis. crop-picker.js works out where the photo
   landed from its natural size, so no padding or border here. */
.sm-crop-stage {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    touch-action: none;
    background-color: var(--sm-aqua-tint);
}

.sm-crop-stage img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

/* The blurred fill behind a photo that doesn't cover its square — in the crop stage always, in a
   crop preview only once it is zoomed out past the photo. A stand-in for the fill the server bakes
   into the card (FileSystemImageStorageService.DrawBlurredBackdrop), dimmed to match it. The
   source is a custom property set from JS so the (often data-URL) photo isn't rendered twice.
   Oversized so the blur's soft edge falls outside the clip. */
.sm-crop-stage::before,
.sm-crop-preview::before,
.image-thumbnail-frame::before {
    content: "";
    position: absolute;
    inset: -10%;
    background: var(--sm-crop-src, none) center / cover no-repeat;
    filter: blur(16px) brightness(0.85);
}

/* Their own compositor layers, so moving or resizing the crop box above them neither re-runs the
   blur nor re-scales the photo. */
.sm-crop-stage::before,
.sm-crop-stage img {
    will-change: transform;
}

/* Positioned entirely by JS (crop-picker.js) — see CropPicker.razor for why C# never renders its
   left/top/width/height directly. A move gesture runs on transform, hence the layer. The dimming
   spread only has to reach across the stage, which is never wider than the viewport; a 9999px one
   made a needlessly vast layer. */
.sm-crop-box {
    position: absolute;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--sm-teal), 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 0 100vmax rgba(20, 20, 20, 0.4);
    cursor: move;
    touch-action: none;
    will-change: transform;
}

.sm-crop-handle {
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--sm-teal);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    cursor: nwse-resize;
    touch-action: none;
}

.sm-crop-preview-label {
    font-size: var(--fs-sm);
    color: var(--sm-ink-soft);
    margin: 0 0 0.4rem;
}

/* Mirrors .sm-card-img-wrap */
/* Must match .sm-card-img-wrap in site.css. The pane claims to show "how the directory card
   will look", so any other shape means the registrant aims their crop at a box that never gets
   applied. */
.sm-crop-preview {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--sm-aqua-tint);
}

/* Sizing/position come from CropStyles.PreviewStyle (inline, computed from the crop rect) — this
   just fixes the display type so an <img>'s default inline baseline gap can't skew it. */
.sm-crop-preview img {
    display: block;
}

.sm-crop-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-top: 1rem;
}

@media (max-width: 640px) {
    .sm-crop-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Toast / alert ────────────────────────────────────────── */

.sm-alert {
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    font-family: var(--font-body);
    margin-bottom: 1rem;
}

.sm-alert:last-child {
    margin-bottom: 0;
}

/* A link inside an alert takes the alert's own text colour. Left to the site's base link colour
   it would be teal on the info alert's aqua tint, which is 3.47:1. */
.sm-alert a { color: inherit; }

.sm-alert-success {
    background-color: #e6f5f5;
    color: var(--sm-teal);
    border: 1px solid var(--sm-aqua);
}

.sm-alert-error {
    background-color: #fdf0ed;
    color: #9e3a26;
    border: 1px solid var(--sm-coral);
}

.sm-alert-info {
    background-color: var(--sm-aqua-tint);
    color: var(--sm-teal-dark);
    border: 1px solid var(--sm-aqua);
}

/* ── Reduced motion ───────────────────────────────────────────
   Everything that moves on this site is decoration: the card lift, the progress fill, the home
   header fading to glass, the demo captcha's spinner. Honour the OS setting and cut them, rather
   than leaving a visitor who asked for stillness to ride them anyway. Colour changes on hover are
   left alone — they carry meaning and they do not move. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .sm-entertainer-card:hover { transform: none; }
}