/* Shared shell: nav bars, buttons, form controls, badges, help modal.
   Values mirror the design source (Mannwa Web.dc.html) exactly. */

/* ---------- Public nav (landing) ---------- */
.mn-nav {
    position: sticky;
    top: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 18px clamp(20px, 5vw, 72px);
    background: rgba(6, 20, 60, .72);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.mn-nav.mn-nav-light {
    background: rgba(250, 247, 239, .85);
    border-bottom: 1px solid var(--border);
}
.mn-nav.mn-nav-dark {
    background: radial-gradient(120% 80% at 20% -10%, var(--navy-1) 0%, var(--navy-2) 42%, var(--navy-4) 100%);
    border-bottom: 1px solid var(--border);
}
.mn-brand { display: inline-flex; align-items: center; gap: 10px; }
.mn-brand-mark { color: var(--accent); font-size: 17px; transform: rotate(45deg); display: inline-block; }
.mn-brand-logo { height: 34px; width: 34px; display: block; border-radius: 50%; object-fit: cover; }
.mn-brand-text { display: flex; flex-direction: column; line-height: 1.15; gap: 1px; }
.mn-brand-name { color: #fffdf8; font-weight: 800; font-size: 19px; letter-spacing: .3px; }
.mn-nav-light .mn-brand-name { color: var(--navy-3); }
.mn-brand-tagline { color: var(--accent); opacity: .85; font-size: 11px; font-style: italic; letter-spacing: .2px; white-space: nowrap; }
.mn-nav-light .mn-brand-tagline { opacity: .75; }

.mn-nav-actions { display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); flex-wrap: wrap; }
.mn-nav-link {
    background: none; border: none; cursor: pointer;
    color: rgba(255, 253, 248, .72); font-size: 15px; font-weight: 600;
}
.mn-nav-light .mn-nav-link { color: var(--muted); }
.mn-nav-link:hover { color: #fffdf8; }
.mn-nav-light .mn-nav-link:hover { color: var(--navy-3); }

.mn-lang-select {
    height: 40px; padding: 0 12px; border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06);
    color: #fffdf8; font-weight: 600; font-size: 14px; cursor: pointer;
}
.mn-nav-light .mn-lang-select { border-color: var(--border); background: #fffdf8; color: var(--navy-3); }

.mn-app-avatar {
    width: 38px; height: 38px; border-radius: 12px;
    display: inline-grid; place-items: center;
    background: #eef1f8; color: var(--navy-3);
    font-family: var(--font-display); font-size: 16px; font-weight: 600;
}

/* ---------- Buttons ---------- */
.mn-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    border: none; border-radius: 16px; cursor: pointer;
    font-weight: 800; font-size: 16px; font-family: var(--font-body);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.mn-btn:active { transform: scale(.97); }
.mn-btn-accent { background: var(--accent); color: var(--on-accent); box-shadow: 0 14px 34px rgba(246, 179, 63, .3); }
.mn-btn-navy {
    background: linear-gradient(135deg, var(--navy-3), var(--navy-4));
    color: #fffdf8; box-shadow: 0 16px 34px rgba(9, 43, 130, .28);
}
.mn-btn-ghost-dark {
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .22);
    color: #fffdf8; font-weight: 600;
}
.mn-btn-ghost-light {
    background: #fffdf8; border: 1px solid var(--border); color: var(--navy-3); font-weight: 700;
}
.mn-btn-lg { height: 60px; padding: 0 30px; font-size: 17px; border-radius: 18px; }
.mn-btn-md { height: 44px; padding: 0 22px; font-size: 15px; border-radius: 14px; }
.mn-btn-disabled { background: #e6e2d8 !important; color: #a9b0c2 !important; box-shadow: none !important; cursor: not-allowed !important; }
.mn-btn-block { width: 100%; }

/* ---------- Badges / pills ---------- */
/* Accent capsule used in dark hero navs (snapshot / report) */
.mn-badge {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(246, 179, 63, .14); border: none;
    color: var(--accent); font-size: 15px; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase;
}
/* Gold capsule used on light-body navs (unlock) */
.mn-badge-light {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 14px; border-radius: 999px;
    background: #ffe3a4; border: none;
    color: #8a6a1f; font-size: 11.5px; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase;
}
.mn-eyebrow {
    display: block; font-size: 13px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--sage);
}
.mn-pill {
    padding: 6px 12px; border-radius: 999px; background: #eef1f8; color: var(--navy-3);
    font-size: 12.5px; font-weight: 600; display: inline-block;
}

/* ---------- Minimal screen subnav (Snapshot / Unlock / Report): back-pill + badge, space-between, no brand ---------- */
.mn-hero-nav {
    position: relative; z-index: 2; max-width: 1160px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; flex-wrap: wrap; gap: 12px;
}
.mn-page-nav {
    width: 100%;
    max-width: 1160px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 20px clamp(20px, 5vw, 72px) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.mn-pill-back-dark, .mn-pill-back-light {
    display: inline-flex; align-items: center; gap: 9px; border-radius: 999px;
    font-weight: 700; font-size: 14px;
}
.mn-pill-back-dark {
    padding: 9px 15px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
    color: #fffdf8;
}
.mn-pill-back-light {
    padding: 10px 16px; background: var(--off-white); border: 1px solid var(--border);
    color: var(--navy-3);
}
.mn-pill-back-dark:active, .mn-pill-back-light:active { transform: scale(.96); }

/* ---------- Cards ---------- */
.mn-card {
    background: var(--off-white); border: 1px solid var(--border); border-radius: 24px;
    box-shadow: var(--shadow-soft);
}

/* ---------- Forms ---------- */
.mn-field { margin-bottom: 18px; text-align: left; }
.mn-field label {
    display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 8px;
}
.mn-field .required-mark { color: var(--accent); margin-left: 2px; }
.mn-field input[type=text], .mn-field input[type=email], .mn-field input[type=password],
.mn-field input[type=date], .mn-field input[type=time], .mn-field select {
    width: 100%; height: 56px; padding: 0 16px; border-radius: 15px;
    border: 1.5px solid var(--border); background: var(--off-white); font-size: 16px; color: var(--ink);
    outline: none; transition: border-color .18s ease, box-shadow .18s ease;
}
.mn-field input:focus, .mn-field select:focus {
    border-color: var(--navy-3); box-shadow: 0 0 0 4px rgba(9, 43, 130, .08);
}
.mn-field-error { color: #b3261e; font-size: 13px; font-weight: 600; margin-top: 6px; }
.mn-form-error {
    background: #fdecec; border: 1px solid #f3b7b3; color: #8a231d;
    padding: 12px 16px; border-radius: 14px; font-size: 14px; font-weight: 600; margin-bottom: 18px;
}

/* Custom checkbox (design-accurate: 24px rounded box + checkmark) */
.mn-checkbox-row { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; text-align: left; position: relative; }
.mn-checkbox-row input { position: absolute; opacity: 0; top: 0; left: 0; width: 24px; height: 24px; margin: 0; cursor: pointer; }
.mn-check-box {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; margin-top: 1px;
    border: 2px solid var(--border); background: transparent; display: grid; place-items: center;
    transition: all .18s ease;
}
.mn-check-box svg { opacity: 0; }
.mn-checkbox-row input:checked ~ .mn-check-box { border-color: var(--navy-3); background: var(--navy-3); }
.mn-checkbox-row input:checked ~ .mn-check-box svg { opacity: 1; }
.mn-checkbox-row span.mn-check-label { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.mn-checkbox-row .mn-check-label b, .mn-checkbox-row .mn-check-label a { color: var(--navy-3); font-weight: 700; }

.mn-toggle-group { display: grid; gap: 10px; }
.mn-toggle-btn {
    display: block; width: 100%; text-align: left; padding: 14px 16px; border-radius: 15px;
    border: 1.5px solid var(--border); background: var(--off-white); cursor: pointer;
    font-family: var(--font-body); transition: border-color .15s ease, background .15s ease;
}
.mn-toggle-btn strong { display: block; font-size: 16px; color: var(--ink); }
.mn-toggle-btn span.mn-toggle-sub { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.mn-toggle-btn.is-selected { border-color: var(--navy-3); background: #eef1f8; }

/* ---------- Help modal ---------- */
.mn-help-modal {
    position: fixed; inset: 0; display: none; place-items: center; padding: 28px;
    background: rgba(9, 22, 48, .28); backdrop-filter: blur(10px); z-index: 130;
}
.mn-help-modal.open { display: grid; }
.mn-help-panel {
    position: relative; width: min(620px, 100%); padding: 34px; border-radius: 28px;
    box-sizing: border-box;
    background: var(--off-white); border: 1px solid var(--border); box-shadow: var(--shadow-strong);
    text-align: left;
}
.mn-help-close {
    position: absolute; top: 18px; right: 20px; border: none; background: transparent;
    color: var(--muted); font-size: 28px; line-height: 1; cursor: pointer;
}
.mn-help-panel h2 { color: var(--navy-3); font-size: 32px; line-height: 1.1; margin-top: 8px; }
.mn-help-intro { margin: 12px 0 24px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.mn-help-grid { display: grid; gap: 14px; }
.mn-help-item { display: flex; gap: 14px; padding: 16px; border-radius: 18px; background: #f8f5ee; border: 1px solid var(--divider); }
.mn-help-icon {
    flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: var(--navy-3); color: #fff; font-weight: 800;
}
.mn-help-item h3 { margin: 0; color: var(--ink); font-size: 16px; font-family: var(--font-body); font-weight: 700; }
.mn-help-item p { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.mn-help-footer { margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: var(--sage-soft); color: var(--sage-dark); font-size: 14px; font-weight: 700; }

/* ---------- Policy modal (unlock page) ---------- */
.mn-policy-modal[open] { display: grid; place-items: center; }
.mn-policy-modal { border: none; padding: 0; background: transparent; max-width: none; max-height: none; }
.mn-policy-modal::backdrop { background: rgba(9, 22, 48, .4); backdrop-filter: blur(6px); }
.mn-policy-panel {
    width: min(640px, 92vw); max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 30px 32px;
    box-sizing: border-box;
    border-radius: 26px; background: var(--off-white); box-shadow: var(--shadow-strong);
}
.mn-policy-section { margin-bottom: 22px; }
.mn-policy-section h3 { font-size: 18px; color: var(--navy-3); font-family: var(--font-display); margin-bottom: 8px; }
.mn-policy-section p { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0; }

/* ---------- Layout helpers ---------- */
.mn-container {
    width: 100%;
    max-width: 1240px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 72px);
}
.mn-container-narrow {
    width: 100%;
    max-width: 1160px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 72px);
}

.mn-hero-dark {
    position: relative; overflow: hidden;
    background: radial-gradient(130% 90% at 72% -20%, var(--navy-1) 0%, var(--navy-2) 46%, var(--navy-4) 100%);
}

footer.mn-footer {
    border-top: 1px solid var(--border); padding: clamp(32px, 4vw, 56px) clamp(20px, 5vw, 72px);
}
.mn-footer-inner {
    max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px;
    justify-content: space-between; align-items: flex-start;
}
.mn-footer-disclaimer { flex: 1 1 420px; max-width: 640px; margin: 0; color: #8a93a8; font-size: 12.5px; line-height: 1.6; }
.mn-footer-email { display: block; margin-top: 8px; color: var(--navy-3); font-weight: 700; font-size: 13px; text-decoration: none; }
.mn-footer-email:hover { text-decoration: underline; }
.mn-footer-tagline { margin: 6px 0 0; font-style: italic; font-size: 13px; color: var(--muted); }
.mn-footer-tagline-translation { font-style: normal; opacity: .75; }

/* Floating particle dots (mnDrift) in dark panels */
.mn-particle { position: absolute; border-radius: 50%; animation: mnDrift 8s ease-in-out infinite; }

/* ==========================================================================
   Mobile (shared shell) — premium, aligned, no horizontal crowding.
   Desktop/tablet rules above are untouched; everything here is additive.
   ========================================================================== */
@media screen and (max-width: 650px) {
    .mn-nav { padding: 14px 16px; gap: 10px; }
    .mn-brand-logo { height: 30px; width: 30px; }
    .mn-brand-name { font-size: 17px; }
    .mn-brand-tagline { font-size: 10px; }
    .mn-nav-actions { gap: 8px; }
    /* Landing page's plain text nav links ("How it works", "Log in") -- not the
       icon-only .mn-nav-icon/.mn-hero-icon-link buttons used on the report page,
       those stay. Both are redundant here: the hero CTA row right below covers
       login, and "How it works" is just an in-page scroll link users reach
       anyway -- crammed alongside the language select + primary CTA, four
       separate tap targets in one row was wrapping into a crowded, unpolished
       header on phones. */
    .mn-nav-link:not(.mn-nav-icon):not(.mn-hero-icon-link) { display: none; }
    .mn-lang-select { height: 36px; padding: 0 10px; font-size: 13px; }
    .mn-app-avatar { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
    .mn-nav-icon, .mn-home-logout { height: 36px; }
    .mn-nav-icon { width: 36px; border-radius: 10px; }
    .mn-home-logout {
        padding: 0 12px;
        font-size: 13px;
        background: var(--off-white);
        border: 1px solid var(--border);
        color: var(--navy-3);
    }
    .mn-home-logout svg { stroke: var(--navy-3); flex-shrink: 0; }

    .mn-hero-nav, .mn-page-nav { padding-left: 16px; padding-right: 16px; }

    .mn-container, .mn-container-narrow { padding-left: 16px; padding-right: 16px; }

    .mn-btn-lg { height: 54px; padding: 0 22px; font-size: 15.5px; }
    .mn-btn-md { height: 42px; padding: 0 18px; font-size: 14px; }

    .mn-help-modal { padding: 16px; }
    .mn-help-panel { width: 100%; padding: 24px 20px; border-radius: 22px; }
    .mn-help-panel h2 { font-size: 24px; }
    .mn-help-intro { font-size: 14.5px; margin: 10px 0 18px; }
    .mn-help-item { padding: 13px; gap: 12px; }
    .mn-help-close { top: 12px; right: 14px; font-size: 24px; }

    .mn-policy-panel { width: 100%; max-height: 88vh; padding: 22px 18px; border-radius: 20px; }
    .mn-policy-section h3 { font-size: 16.5px; }

    footer.mn-footer { padding: 32px 16px; }
    .mn-footer-inner { gap: 18px; }
    .mn-footer-disclaimer { flex-basis: 100%; }
}

@media screen and (max-width: 430px) {
    .mn-nav-actions { gap: 6px; }
    .mn-lang-select { padding: 0 8px; font-size: 12.5px; }
    .mn-home-logout span { display: none; }
    .mn-home-logout { width: 36px; padding: 0; justify-content: center; border-radius: 10px; }
    .mn-btn-lg { height: 50px; padding: 0 18px; font-size: 15px; }
}