/* Public component only. Host font is inherited; surfaces/contrast are self-contained. */
.mammrelo[data-mammrelo] {
    --mammrelo-accent: var(--e-global-color-primary, #286a59);
    --mammrelo-ink: #18352e;
    --mammrelo-muted: #53695f;
    --mammrelo-line: #dce6df;
    --mammrelo-surface: #fff;
    --mammrelo-soft: #f4f8f5;
    box-sizing: border-box;
    display: block;
    position: relative;
    isolation: isolate;
    opacity: 1;
    visibility: visible;
    overflow: visible;
    transform: none;
    filter: none;
    float: none;
    clear: both;
    inline-size: 100%;
    max-inline-size: 820px;
    min-inline-size: 0;
    margin: 24px auto;
    padding: clamp(20px, 4vw, 40px);
    border: 1px solid var(--mammrelo-line);
    border-block-start: 3px solid var(--mammrelo-accent);
    border-radius: 20px;
    background: var(--mammrelo-surface);
    color: var(--mammrelo-ink);
    color-scheme: light;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.8;
    text-align: start;
    direction: rtl;
    box-shadow: 0 8px 32px rgb(22 49 39 / 5%);
    overflow-wrap: anywhere;
    text-transform: none;
    letter-spacing: normal;
    -webkit-text-fill-color: currentColor;
}
.mammrelo[data-mammrelo] *, .mammrelo[data-mammrelo] *::before, .mammrelo[data-mammrelo] *::after { box-sizing: border-box; }
/* Reset only typography/layout properties commonly imposed on article contents. */
.mammrelo[data-mammrelo] :where(header, article, section, form, div, h2, h3, h4, p, dl, dt, dd, label) {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: visible;
    min-block-size: 0;
    max-block-size: none;
    float: none;
    position: static;
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
    max-inline-size: none;
    inline-size: auto;
    block-size: auto;
    background: transparent;
    color: inherit;
    font-family: inherit;
    line-height: inherit;
    letter-spacing: normal;
    text-transform: none;
    text-indent: 0;
    box-shadow: none;
    overflow-wrap: anywhere;
}
.mammrelo[data-mammrelo] :where(h2, h3, h4, p, dt, dd, label) { display: block; text-align: start; }
.mammrelo[data-mammrelo] :where(h2, h3, h4, button, a)::before, .mammrelo[data-mammrelo] :where(h2, h3, h4, button, a)::after { content: none; }
.mammrelo[data-mammrelo] .mammrelo-title { font-size: clamp(1.35em, 3.6vw, 1.9em); font-weight: 750; line-height: 1.55; }
.mammrelo[data-mammrelo] .mammrelo-form { margin-block-start: 24px; }
.mammrelo[data-mammrelo] .mammrelo-label { margin-block-end: 8px; font-size: .9em; font-weight: 650; }
.mammrelo[data-mammrelo] .mammrelo-input-row { display: grid; gap: 10px; }
.mammrelo[data-mammrelo] :where(input, button, a.mammrelo-link) {
    appearance: none;
    pointer-events: auto;
    position: static;
    float: none;
    margin: 0;
    min-inline-size: 0;
    max-inline-size: 100%;
    inline-size: 100%;
    block-size: auto;
    min-block-size: 48px;
    padding: 12px 18px;
    border: 1px solid var(--mammrelo-line);
    border-radius: 10px;
    background: var(--mammrelo-surface);
    background-image: none;
    color: var(--mammrelo-ink);
    font: inherit;
    line-height: 1.6;
    text-transform: none;
    letter-spacing: normal;
    text-indent: 0;
    text-shadow: none;
    text-decoration: none;
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    overflow-wrap: anywhere;
    white-space: normal;
    -webkit-text-fill-color: currentColor;
}
.mammrelo[data-mammrelo] .mammrelo-input { display: block; border-color: #718779; min-block-size: 54px; font-size: max(16px, 1em); text-align: start; }
.mammrelo[data-mammrelo] .mammrelo-submit { display: inline-flex; align-items: center; justify-content: center; min-block-size: 54px; background: #183f34; color: #fff; border-color: #183f34; font-weight: 700; cursor: pointer; }
.mammrelo[data-mammrelo] .mammrelo-submit:hover { background: #245745; color: #fff; }
.mammrelo[data-mammrelo] .mammrelo-submit:disabled { background: #365b4c; color: #fff; cursor: wait; }
.mammrelo[data-mammrelo] .mammrelo-hint { margin-block-start: 10px; color: var(--mammrelo-muted); font-size: .82em; font-weight: 400; line-height: 1.8; }
/* Keep the live region mounted without an empty visible status panel. */
.mammrelo[data-mammrelo] .mammrelo-status { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mammrelo[data-mammrelo] .mammrelo-status[data-state="error"] { position: static; inline-size: auto; block-size: auto; padding: 12px 16px; margin: 16px 0 0; overflow: visible; clip-path: none; white-space: normal; background: #f8f5ee; color: #5b492c; border: 1px solid #e4d9c7; border-radius: 10px; font-size: .9em; }
.mammrelo[data-mammrelo] .mammrelo-input[aria-invalid="true"] { border-color: #8a704a; }
.mammrelo[data-mammrelo] .mammrelo-card { margin-block-start: 28px; padding-block-start: 26px; border-block-start: 1px solid var(--mammrelo-line); }
.mammrelo[data-mammrelo] .mammrelo-eyebrow { color: var(--mammrelo-muted); font-size: .8em; font-weight: 500; margin-block-end: 4px; }
.mammrelo[data-mammrelo] .mammrelo-name { font-size: clamp(1.3em, 3.8vw, 1.85em); line-height: 1.6; font-weight: 750; }
.mammrelo[data-mammrelo] .mammrelo-facts { display: grid; gap: 10px; margin-block-start: 20px; }
.mammrelo[data-mammrelo] .mammrelo-fact { padding: 16px 18px; border: 1px solid var(--mammrelo-line); border-radius: 12px; background: var(--mammrelo-soft); }
.mammrelo[data-mammrelo] .mammrelo-fact dt { font-size: .8em; font-weight: 500; color: var(--mammrelo-muted); }
.mammrelo[data-mammrelo] .mammrelo-fact dd { margin-block-start: 5px; font-size: 1.05em; font-weight: 650; line-height: 1.7; font-variant-numeric: tabular-nums; }
.mammrelo[data-mammrelo] .mammrelo-fact--score { border-color: #b9d2c3; background: #eaf3ed; }
.mammrelo[data-mammrelo] .mammrelo-fact--score dd { font-size: clamp(1.5em, 4vw, 2em); font-weight: 750; line-height: 1.5; }
.mammrelo[data-mammrelo] .mammrelo-summary { margin-block-start: 24px; padding-inline-start: 18px; border-inline-start: 3px solid var(--mammrelo-line); }
.mammrelo[data-mammrelo] .mammrelo-section-title { font-size: 1em; font-weight: 700; line-height: 1.8; }
.mammrelo[data-mammrelo] .mammrelo-summary p { margin-block-start: 8px; max-inline-size: 65ch; font-size: 1em; font-weight: 400; line-height: 2; white-space: pre-wrap; }
.mammrelo[data-mammrelo] .mammrelo-certificate { margin-block-start: 26px; }
.mammrelo[data-mammrelo] .mammrelo-preview { display: block; position: static; float: none; inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; block-size: auto; max-block-size: none; margin: 12px 0 0; padding: 0; border: 1px solid var(--mammrelo-line); border-radius: 12px; object-fit: contain; opacity: 1; visibility: visible; transform: none; filter: none; box-shadow: none; }
.mammrelo[data-mammrelo] .mammrelo-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 14px; }
.mammrelo[data-mammrelo] .mammrelo-link { display: inline-flex; justify-content: center; align-items: center; flex: 1 1 160px; inline-size: auto; color: #194e3c; background: #f2f7f3; border-color: #b7cdbd; font-weight: 650; font-size: .9em; cursor: pointer; }
.mammrelo[data-mammrelo] .mammrelo-link:hover { background: #e5efe8; color: #194e3c; text-decoration: underline; }
.mammrelo[data-mammrelo] .mammrelo-reset { display: inline-flex; align-items: center; justify-content: center; margin-block-start: 24px; font-size: .9em; font-weight: 650; background: transparent; color: #334f42; cursor: pointer; }
.mammrelo[data-mammrelo] .mammrelo-reset:hover { background: var(--mammrelo-soft); color: #183f34; }
.mammrelo[data-mammrelo] .mammrelo-media-note { margin-block-start: 16px; color: var(--mammrelo-muted); font-size: .88em; line-height: 1.9; }
.mammrelo[data-mammrelo] :where(input, button, a):focus-visible, .mammrelo[data-mammrelo] .mammrelo-card:focus-visible { outline: 3px solid #276851; outline-offset: 3px; }
.mammrelo[data-mammrelo] bdi { unicode-bidi: isolate; }
@media (min-width: 480px) {
    .mammrelo[data-mammrelo] .mammrelo-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
    .mammrelo[data-mammrelo] .mammrelo-input-row { grid-template-columns: minmax(0, 1fr) minmax(120px, auto); }
    .mammrelo[data-mammrelo] .mammrelo-reset { inline-size: auto; min-inline-size: 150px; }
}
/* Narrow exceptions: preserve hidden semantics and suppress host-injected motion. */
.mammrelo[data-mammrelo] [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
    .mammrelo[data-mammrelo] *, .mammrelo[data-mammrelo] *::before, .mammrelo[data-mammrelo] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Host themes may outline programmatic mouse focus; retain the keyboard-visible ring. */
.mammrelo[data-mammrelo] .mammrelo-card:focus:not(:focus-visible) { outline: none; }

/* Readability boundary: late theme/dark-mode !important paint rules can otherwise
 * turn bdi values white on pale tiles. Important layered declarations outrank
 * unlayered theme rules without escalating selector specificity. Only component
 * paint is protected; font/layout and user-agent forced colors remain available.
 * Browsers without cascade layers retain the scoped fallback styles above. */
@layer mammrelo-readability {
    .mammrelo[data-mammrelo] {
        background: #fff !important;
        color: #18352e !important;
        color-scheme: light !important;
    }
    .mammrelo[data-mammrelo], .mammrelo[data-mammrelo] * {
        -webkit-text-fill-color: currentColor !important;
        text-shadow: none !important;
    }
    .mammrelo[data-mammrelo] * { color: inherit !important; background: transparent !important; }
    .mammrelo[data-mammrelo] :where(.mammrelo-hint, .mammrelo-eyebrow, .mammrelo-media-note, .mammrelo-fact dt) { color: #53695f !important; }
    .mammrelo[data-mammrelo] .mammrelo-input { color: #18352e !important; background: #fff !important; }
    .mammrelo[data-mammrelo] .mammrelo-input::placeholder { color: #53695f !important; -webkit-text-fill-color: currentColor !important; opacity: 1 !important; }
    .mammrelo[data-mammrelo] .mammrelo-fact { background: #f4f8f5 !important; }
    .mammrelo[data-mammrelo] .mammrelo-fact--score { background: #eaf3ed !important; }
    .mammrelo[data-mammrelo] .mammrelo-submit { color: #fff !important; background: #183f34 !important; }
    .mammrelo[data-mammrelo] .mammrelo-submit:hover { background: #245745 !important; }
    .mammrelo[data-mammrelo] .mammrelo-submit:disabled { background: #365b4c !important; }
    .mammrelo[data-mammrelo] .mammrelo-link { color: #194e3c !important; background: #f2f7f3 !important; }
    .mammrelo[data-mammrelo] .mammrelo-link:hover { background: #e5efe8 !important; }
    .mammrelo[data-mammrelo] .mammrelo-reset { color: #334f42 !important; background: #fff !important; }
    .mammrelo[data-mammrelo] .mammrelo-reset:hover { color: #183f34 !important; background: #f4f8f5 !important; }
    .mammrelo[data-mammrelo] .mammrelo-status[data-state="error"] { color: #5b492c !important; background: #f8f5ee !important; }
}

/* Unknown remote dimensions use a stable frame; contain preserves the image proportions. */
.mammrelo[data-mammrelo] .mammrelo-preview.mammrelo-preview-direct { aspect-ratio: 4 / 3; object-fit: contain; }