/* ============================================================
   MY LED KIT COMMUNITY — The Permanent Lighting Forum
   ------------------------------------------------------------
   THE shared design system for every /forum page: tokens, layout,
   the forum bar under the storefront header, the phone bottom bar,
   buttons, cards, post cards, forms, tabs, dialogs, toasts,
   lightbox, empty and loading states. Page sheets (forum-auth,
   forum-discover, forum-thread, forum-profile, forum-moderation)
   use only these tokens.
   Class prefix: mf- (MY LED KIT forum). Premium monochrome: white /
   light grey grounds, near-black ink, charcoal fills; blue only for
   links and focus (the storefront's --accent); a quiet green only for
   "answered" and "verified". Buttons are white with black text in both
   themes (the storefront rule), pill-shaped. Light by default; dark
   follows the site's own switch (html[data-theme="dark"]).
   Rules: body text 16px minimum, touch targets 44px minimum, one
   restrained shadow, no gradients, no glows, no decorative motion.
   The storefront header / footer keep their own styles (styles.css,
   storefront.css); nothing here restyles them.
   ============================================================ */

.mf-page {
    --mf-bg: #f5f5f7;
    --mf-surface: #ffffff;
    --mf-surface-2: #f5f5f7;
    --mf-surface-3: #e8e8ed;
    --mf-ink: #1d1d1f;
    --mf-ink-2: #3a3a3c;
    --mf-ink-3: #6e6e73;
    --mf-line: rgba(29, 29, 31, 0.10);
    --mf-line-strong: rgba(29, 29, 31, 0.22);
    --mf-field-line: #8e8e93;
    --mf-solid: #1d1d1f;            /* charcoal fills: avatars, icon tiles, the selected tab, toasts */
    --mf-solid-ink: #ffffff;
    --mf-solid-2: #3a3a3c;
    --mf-feature: #1d1d1f;          /* the welcome card: charcoal in both themes */
    --mf-feature-ink: #ffffff;
    --mf-accent: var(--accent, #0872C6);
    --mf-accent-soft: var(--accent-soft, #EAF6FF);
    --mf-ok: #17794a;
    --mf-ok-soft: #e9f6ef;
    --mf-ok-line: #b9dfc9;
    --mf-danger: #b42318;
    --mf-danger-soft: #fdeceb;
    --mf-danger-line: #f5c2bd;
    --mf-warn-ink: #7a4b00;
    --mf-warn-soft: #fff4d6;
    --mf-warn-line: #f0d9a8;
    --mf-info-soft: #f2f2f5;
    --mf-btn: var(--btn-primary, #ffffff);
    --mf-btn-hi: var(--btn-primary-hi, #f2f2f4);
    --mf-btn-ink: var(--btn-primary-ink, #000000);
    --mf-btn-line: var(--btn-primary-line, rgba(29, 29, 31, 0.30));

    --mf-font-head: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --mf-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

    --mf-radius-sm: 10px;
    --mf-radius: 14px;
    --mf-radius-lg: 20px;
    --mf-pill: 999px;
    --mf-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 16px rgba(0, 0, 0, 0.04);
    --mf-shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.06), 0 18px 48px rgba(0, 0, 0, 0.16);
    --mf-focus: 0 0 0 3px var(--mf-surface), 0 0 0 6px var(--mf-accent);

    --mf-tap: 44px;
    --mf-tap-lg: 52px;
    --mf-site-h: 68px;              /* the storefront header (sticky) */
    --mf-bar-h: 64px;
    --mf-bottom-h: 64px;
    --mf-gutter: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --mf-max: 1328px;
    --mf-safe-bottom: env(safe-area-inset-bottom, 0px);
}
[data-theme="dark"] .mf-page {
    --mf-bg: #161617;
    --mf-surface: #1f1f21;
    --mf-surface-2: #2a2a2d;
    --mf-surface-3: #333336;
    --mf-ink: #f5f5f7;
    --mf-ink-2: #d1d1d6;
    --mf-ink-3: #a1a1a6;
    --mf-line: rgba(255, 255, 255, 0.12);
    --mf-line-strong: rgba(255, 255, 255, 0.26);
    --mf-field-line: #8e8e93;
    --mf-solid: #f5f5f7;
    --mf-solid-ink: #1d1d1f;
    --mf-solid-2: #d1d1d6;
    --mf-feature: #2c2c2e;
    --mf-ok: #56d39a;
    --mf-ok-soft: #10301f;
    --mf-ok-line: #1f5a3a;
    --mf-danger: #ff8a78;
    --mf-danger-soft: #3a1714;
    --mf-danger-line: #6b2a24;
    --mf-warn-ink: #ffd479;
    --mf-warn-soft: #33270d;
    --mf-warn-line: #5c4615;
    --mf-info-soft: #26262a;
    --mf-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --mf-shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 48px rgba(0, 0, 0, 0.6);
}

/* ---------- Base (forum content only; the storefront chrome keeps its own) ---------- */
html.mf-root { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--mf-site-h, 68px) + 12px); }
/* keyboard focus never lands behind the fixed bottom bar */
@media (max-width: 899px) { html.mf-root { scroll-padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px); } }
body.mf-page { background: var(--mf-bg); color: var(--mf-ink); min-height: 100vh; overflow-x: hidden; }
.mf-page main *, .mf-page main *::before, .mf-page main *::after,
.mf-header *, .mf-bottom-nav *, .mf-footer *, .mf-dialog *, .mf-lightbox * { box-sizing: border-box; }
.mf-main-wrap { font-family: var(--mf-font-body); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.mf-main-wrap h1, .mf-main-wrap h2, .mf-main-wrap h3, .mf-main-wrap h4,
.mf-dialog h2, .mf-header h1 {
    margin: 0;
    font-family: var(--mf-font-head);
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.15;
    color: var(--mf-ink);
}
.mf-main-wrap h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.mf-main-wrap h2 { font-size: clamp(1.3rem, 2.6vw, 1.55rem); }
.mf-main-wrap h3 { font-size: 1.15rem; }
.mf-main-wrap p { margin: 0; }
.mf-main-wrap a, .mf-dialog a { color: var(--mf-accent); text-underline-offset: 3px; }
.mf-main-wrap img { max-width: 100%; display: block; }
/* :where() keeps this reset at zero specificity so component classes (.mf-btn, .mf-input…) win */
:where(.mf-main-wrap, .mf-header, .mf-dialog) button, :where(.mf-main-wrap, .mf-header, .mf-dialog) input,
:where(.mf-main-wrap, .mf-header, .mf-dialog) select, :where(.mf-main-wrap, .mf-header, .mf-dialog) textarea { font: inherit; color: inherit; }
.mf-main-wrap :focus, .mf-header :focus, .mf-dialog :focus, .mf-bottom-nav :focus { outline: none; }
.mf-main-wrap :focus-visible, .mf-header :focus-visible, .mf-dialog :focus-visible, .mf-bottom-nav :focus-visible, .mf-footer :focus-visible { outline: none; box-shadow: var(--mf-focus); }
.mf-page [hidden] { display: none !important; }
.mf-vh {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.mf-icon { width: 20px; height: 20px; flex: 0 0 auto; display: inline-block; vertical-align: middle; fill: none; }
.mf-icon--lg { width: 24px; height: 24px; }

/* ---------- Preview bar (preview hosts only; never production) ---------- */
.mf-preview-bar {
    position: relative; z-index: 60;
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px;
    padding: 8px var(--mf-gutter);
    background: var(--mf-warn-soft); color: var(--mf-warn-ink);
    border-bottom: 1px solid var(--mf-warn-line);
    font-size: 0.95rem; font-weight: 600; text-align: center;
}
.mf-preview-bar strong { font-weight: 800; }
.mf-preview-bar .mf-seg { background: rgba(255, 255, 255, 0.55); }

/* ---------- Forum bar (under the storefront header; scrolls with the page) ---------- */
.mf-header { background: var(--mf-surface); color: var(--mf-ink); border-bottom: 1px solid var(--mf-line); font-family: var(--mf-font-body); }
.mf-header-inner {
    max-width: var(--mf-max); margin: 0 auto; min-height: var(--mf-bar-h);
    padding: 8px var(--mf-gutter);
    display: flex; align-items: center; gap: 18px;
}
.mf-brand { display: inline-flex; align-items: center; color: var(--mf-ink) !important; text-decoration: none; flex: 0 0 auto; min-height: var(--mf-tap); }
.mf-brand-text { display: flex; flex-direction: column; justify-content: center; line-height: 1.1; }
.mf-brand-text b { font-size: 1.05rem; font-weight: 750; letter-spacing: -0.02em; }
.mf-brand-text span { margin-top: 3px; font-size: 0.8rem; font-weight: 500; color: var(--mf-ink-3); }
.mf-nav { display: flex; align-items: center; gap: 2px; }
.mf-nav a {
    display: inline-flex; align-items: center; gap: 8px; min-height: var(--mf-tap);
    padding: 0 14px; border-radius: var(--mf-pill);
    color: var(--mf-ink-2) !important; text-decoration: none;
    font-weight: 600; font-size: 0.98rem; white-space: nowrap;
}
.mf-nav a:hover { color: var(--mf-ink) !important; background: var(--mf-surface-2); }
.mf-nav a[aria-current="page"] { color: var(--mf-ink) !important; background: var(--mf-surface-3); }
.mf-header-search { flex: 1 1 auto; min-width: 180px; max-width: 420px; margin-left: auto; position: relative; }
@media (min-width: 900px) and (max-width: 1099px) {
    .mf-header-inner { gap: 12px; }
    .mf-nav a { padding: 0 12px; }
    .mf-hide-narrow { display: none !important; }
    .mf-header-new { width: var(--mf-tap); padding: 0; }
    .mf-member-btn { padding: 3px; }
}
.mf-header-search .mf-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--mf-ink-3); pointer-events: none; }
.mf-header-search input {
    width: 100%; height: var(--mf-tap); padding: 0 18px 0 46px;
    border-radius: var(--mf-pill); border: 1px solid var(--mf-line-strong);
    background: var(--mf-surface-2); color: var(--mf-ink); font-size: 1rem;
    -webkit-appearance: none; appearance: none;
}
.mf-header-search input::placeholder { color: var(--mf-ink-3); }
.mf-header-search input:focus-visible { border-color: var(--mf-accent); background: var(--mf-surface); }
.mf-header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.mf-header-icon {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: var(--mf-tap); height: var(--mf-tap); border-radius: 50%;
    color: var(--mf-ink) !important; background: transparent; border: 0; cursor: pointer; text-decoration: none;
}
.mf-header-icon:hover { background: var(--mf-surface-2); }
.mf-header-dot { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--mf-danger); box-shadow: 0 0 0 2px var(--mf-surface); }
.mf-member-btn {
    display: inline-flex; align-items: center; gap: 10px; min-height: var(--mf-tap);
    padding: 0 14px 0 4px; border-radius: var(--mf-pill); border: 1px solid var(--mf-line);
    background: transparent; color: var(--mf-ink) !important; text-decoration: none; font-weight: 600;
}
.mf-member-btn:hover { background: var(--mf-surface-2); }
.mf-member-btn .mf-avatar { width: 36px; height: 36px; font-size: 0.9rem; }

/* ---------- Mobile bottom bar ---------- */
.mf-bottom-nav { display: none; }
@media (max-width: 899px) {
    .mf-nav, .mf-header-search, .mf-header-actions .mf-hide-mobile { display: none !important; }
    .mf-header-inner { gap: 10px; min-height: 58px; }
    .mf-header-actions { margin-left: auto; }
    .mf-brand-text b { font-size: 1rem; }
    .mf-brand-text span { font-size: 0.75rem; }
    .mf-member-btn { padding: 3px; }
    .mf-preview-bar { font-size: 0.9rem; padding: 6px var(--mf-gutter); }
    body.mf-page { padding-bottom: calc(var(--mf-bottom-h) + var(--mf-safe-bottom)); }
    .mf-bottom-nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
        display: grid; grid-template-columns: repeat(5, 1fr);
        height: calc(var(--mf-bottom-h) + var(--mf-safe-bottom)); padding-bottom: var(--mf-safe-bottom);
        background: var(--mf-surface); border-top: 1px solid var(--mf-line);
        font-family: var(--mf-font-body);
    }
    .mf-bottom-nav a {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        min-width: 0; min-height: var(--mf-tap); color: var(--mf-ink-3); text-decoration: none;
        font-size: 0.75rem; font-weight: 650; letter-spacing: 0; white-space: nowrap;
    }
    .mf-bottom-nav a .mf-icon { width: 24px; height: 24px; }
    .mf-bottom-nav a[aria-current="page"] { color: var(--mf-ink); }
    .mf-bottom-nav a.mf-bottom-post .mf-bottom-plus {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 32px; border-radius: var(--mf-pill); background: var(--mf-solid); color: var(--mf-solid-ink);
    }
    .mf-bottom-nav a.mf-bottom-post .mf-bottom-plus .mf-icon { width: 22px; height: 22px; }
}
@media (max-width: 380px) { .mf-brand-text span { display: none; } }

/* ---------- Buttons (pill; white with black text in both themes) ---------- */
.mf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--mf-tap); padding: 0 20px;
    border-radius: var(--mf-pill); border: 0;
    font-family: var(--mf-font-body); font-size: 1rem; font-weight: 600; line-height: 1;
    text-decoration: none !important; white-space: nowrap; cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.mf-btn[disabled], .mf-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.mf-btn--primary, .mf-btn--dark {
    background: var(--mf-btn); color: var(--mf-btn-ink) !important; box-shadow: inset 0 0 0 1px var(--mf-btn-line);
}
.mf-btn--primary { font-weight: 700; }
.mf-btn--primary:hover, .mf-btn--dark:hover { background: var(--mf-btn-hi); }
.mf-btn--ghost { background: transparent; color: var(--mf-ink) !important; box-shadow: inset 0 0 0 1px var(--mf-line-strong); }
.mf-btn--ghost:hover { background: var(--mf-surface-2); }
.mf-btn--quiet { background: transparent; color: var(--mf-ink-2) !important; padding: 0 14px; }
.mf-btn--quiet:hover { background: var(--mf-surface-2); color: var(--mf-ink) !important; }
.mf-btn--danger { background: var(--mf-surface); color: var(--mf-danger) !important; box-shadow: inset 0 0 0 1px var(--mf-danger); }
.mf-btn--danger:hover { background: var(--mf-danger-soft); }
.mf-btn--joined { background: var(--mf-surface-3); color: var(--mf-ink) !important; box-shadow: none; }
.mf-btn--lg { min-height: var(--mf-tap-lg); padding: 0 26px; font-size: 1.05rem; }
.mf-btn--sm { min-height: var(--mf-tap); padding: 0 16px; font-size: 1rem; }
.mf-btn--block { width: 100%; }
/* the smallest phones (320px): long button labels wrap instead of pushing the page sideways */
@media (max-width: 359px) { .mf-btn { white-space: normal; text-align: center; line-height: 1.2; } }
.mf-btn--icon { width: var(--mf-tap); padding: 0; }
.mf-btn .mf-spinner { width: 18px; height: 18px; }
.mf-spinner {
    display: inline-block; width: 20px; height: 20px; border-radius: 50%;
    border: 2.5px solid currentColor; border-right-color: transparent;
    animation: mf-spin 0.8s linear infinite;
}
@keyframes mf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mf-spinner { animation-duration: 2.4s; } }

/* ---------- Layout ---------- */
.mf-main-wrap { max-width: var(--mf-max); margin: 0 auto; padding: 28px var(--mf-gutter) 56px; }
.mf-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.mf-layout--two { grid-template-columns: minmax(0, 1fr) 320px; }
.mf-layout--narrow { display: block; max-width: 760px; margin: 0 auto; }
.mf-rail { position: sticky; top: calc(var(--mf-site-h) + 20px); display: grid; gap: 18px; }
.mf-rail-left { max-height: calc(100vh - var(--mf-site-h) - 40px); overflow-y: auto; padding: 2px 4px 2px 2px; }
.mf-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; }
@media (max-width: 1179px) {
    .mf-layout { grid-template-columns: minmax(0, 1fr) 300px; }
    .mf-rail-left { display: none; }
}
@media (max-width: 899px) {
    .mf-main-wrap { padding: 18px var(--mf-gutter) 32px; }
    .mf-layout, .mf-layout--two { display: block; }
    .mf-rail { position: static; margin-top: 24px; }
    .mf-rail-left { display: none; }
}

/* Page heading row */
.mf-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mf-page-head .mf-kicker {
    display: block; margin-bottom: 8px; color: var(--mf-ink-3);
    font-size: 0.85rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
}
.mf-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.95rem; color: var(--mf-ink-3); }
.mf-crumbs a { display: inline-flex; align-items: center; min-height: var(--mf-tap); margin: -6px 0; color: var(--mf-ink-2); font-weight: 650; text-decoration: none; }
.mf-crumbs a:hover { color: var(--mf-ink); text-decoration: underline; }

/* ---------- Surfaces ---------- */
.mf-card {
    background: var(--mf-surface); border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-lg); box-shadow: var(--mf-shadow);
}
.mf-card-pad { padding: 22px; }
.mf-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mf-card-head h2, .mf-card-head h3 { font-size: 1.1rem; }
.mf-card-link { font-weight: 700; text-decoration: none; min-height: var(--mf-tap); display: inline-flex; align-items: center; }
.mf-card-link:hover { text-decoration: underline; }
.mf-divider { height: 1px; background: var(--mf-line); border: 0; margin: 18px 0; }
@media (max-width: 599px) {
    .mf-card-pad { padding: 18px; }
    .mf-card { border-radius: var(--mf-radius); }
}

/* Left rail navigation */
.mf-railnav h2 { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mf-ink-3); margin: 18px 12px 6px; }
.mf-railnav h2:first-child { margin-top: 0; }
.mf-railnav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mf-railnav a {
    display: flex; align-items: center; gap: 12px; min-height: var(--mf-tap);
    padding: 0 12px; border-radius: 12px; color: var(--mf-ink-2); text-decoration: none; font-weight: 650;
}
.mf-railnav a:hover { background: var(--mf-surface-3); color: var(--mf-ink); }
.mf-railnav a[aria-current="page"], .mf-railnav a.is-active { background: var(--mf-surface); color: var(--mf-ink); box-shadow: inset 3px 0 0 var(--mf-ink), var(--mf-shadow); }
.mf-railnav a:focus-visible, .mf-railnav a[aria-current="page"]:focus-visible { box-shadow: inset 0 0 0 3px var(--mf-accent); }
.mf-chiprow a:focus-visible { box-shadow: inset 0 0 0 3px var(--mf-accent); }
.mf-railnav a .mf-count { margin-left: auto; font-size: 0.85rem; color: var(--mf-ink-3); font-weight: 600; }

/* ---------- Avatars ---------- */
.mf-avatar {
    position: relative; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--mf-solid); color: var(--mf-solid-ink);
    font-family: var(--mf-font-head); font-weight: 700; font-size: 1rem; text-transform: uppercase;
}
.mf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mf-avatar[data-tone="1"] { background: #1d1d1f; color: #fff; }
.mf-avatar[data-tone="2"] { background: #3a3a3c; color: #fff; }
.mf-avatar[data-tone="3"] { background: #48484a; color: #fff; }
.mf-avatar[data-tone="4"] { background: #2c2c2e; color: #fff; }
.mf-avatar[data-tone="5"] { background: #636366; color: #fff; }
[data-theme="dark"] .mf-avatar[data-tone] { background: #48484a; }
[data-theme="dark"] .mf-avatar[data-tone="2"], [data-theme="dark"] .mf-avatar[data-tone="4"] { background: #636366; }
.mf-avatar--sm { width: 32px; height: 32px; font-size: 0.82rem; }
.mf-avatar--lg { width: 56px; height: 56px; font-size: 1.3rem; }
.mf-avatar--xl { width: 112px; height: 112px; font-size: 2.4rem; }

/* Community icon tile */
.mf-cicon {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--mf-solid); color: var(--mf-solid-ink);
}
.mf-cicon .mf-icon { width: 22px; height: 22px; }
.mf-cicon--sm { width: 28px; height: 28px; border-radius: 8px; }
.mf-cicon--sm .mf-icon { width: 16px; height: 16px; }
.mf-cicon--lg { width: 72px; height: 72px; border-radius: 20px; }
.mf-cicon--lg .mf-icon { width: 36px; height: 36px; }

/* ---------- Badges & chips ---------- */
.mf-badge {
    display: inline-flex; align-items: center; gap: 6px; min-height: 28px;
    padding: 0 12px; border-radius: var(--mf-pill);
    font-size: 0.9375rem; font-weight: 750; line-height: 1; white-space: nowrap;
    background: var(--mf-surface-2); color: var(--mf-ink-2); border: 1px solid var(--mf-line);
}
.mf-badge .mf-icon { width: 16px; height: 16px; }
.mf-badge--answered { background: var(--mf-ok-soft); color: var(--mf-ok); border-color: var(--mf-ok-line); }
.mf-badge--open { background: var(--mf-surface); color: var(--mf-ink-2); border-color: var(--mf-line-strong); }
.mf-badge--pending { background: var(--mf-warn-soft); color: var(--mf-warn-ink); border-color: var(--mf-warn-line); }
.mf-badge--dark { background: var(--mf-solid); color: var(--mf-solid-ink); border-color: var(--mf-solid); }
.mf-badge--op { background: var(--mf-solid); color: var(--mf-solid-ink); border-color: var(--mf-solid); min-height: 26px; padding: 0 10px; font-size: 0.875rem; }
.mf-badge--kind { background: var(--mf-surface); color: var(--mf-ink-2); border-color: var(--mf-line-strong); }
.mf-badge--verified { background: var(--mf-ok-soft); color: var(--mf-ok); border-color: var(--mf-ok-line); }
.mf-chip {
    display: inline-flex; align-items: center; gap: 8px; min-height: var(--mf-tap); margin: -6px 0; max-width: 100%;
    color: var(--mf-ink) !important; text-decoration: none; font-weight: 750; font-size: 0.95rem;
}
.mf-chip:hover span { text-decoration: underline; }
.mf-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Segmented tabs ---------- */
.mf-seg {
    display: inline-flex; gap: 4px; padding: 4px; max-width: 100%; min-width: 0;
    border-radius: var(--mf-pill); background: var(--mf-surface-3);
    overflow-x: auto; scrollbar-width: none;
}
.mf-seg::-webkit-scrollbar { display: none; }
.mf-seg button, .mf-seg a {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
    min-height: var(--mf-tap); padding: 0 18px; border: 0; border-radius: var(--mf-pill);
    background: transparent; color: var(--mf-ink-2) !important; text-decoration: none;
    font-weight: 700; font-size: 0.98rem; cursor: pointer; white-space: nowrap;
}
.mf-seg button:hover, .mf-seg a:hover { color: var(--mf-ink) !important; }
.mf-seg [aria-selected="true"], .mf-seg [aria-current="page"], .mf-seg [aria-pressed="true"] {
    background: var(--mf-solid); color: var(--mf-solid-ink) !important;
}
.mf-seg [aria-selected="true"]:hover, .mf-seg [aria-current="page"]:hover, .mf-seg [aria-pressed="true"]:hover { color: var(--mf-solid-ink) !important; }
/* focus drawn inside the pill: the scrolling track clips anything outside */
.mf-seg button:focus-visible, .mf-seg a:focus-visible { box-shadow: inset 0 0 0 3px var(--mf-accent); }
.mf-seg [aria-selected="true"]:focus-visible, .mf-seg [aria-current="page"]:focus-visible, .mf-seg [aria-pressed="true"]:focus-visible { box-shadow: inset 0 0 0 3px var(--mf-accent); }
.mf-seg .mf-icon { width: 18px; height: 18px; }
.mf-tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- Search field (in-page) ---------- */
.mf-search { position: relative; }
.mf-search .mf-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--mf-ink-3); pointer-events: none; }
.mf-search input {
    width: 100%; height: var(--mf-tap-lg); padding: 0 20px 0 52px;
    border-radius: var(--mf-pill); border: 1.5px solid var(--mf-field-line);
    background: var(--mf-surface); font-size: 1.05rem;
}
.mf-search input:focus-visible { border-color: var(--mf-accent); box-shadow: 0 0 0 3px var(--mf-accent-soft); border-radius: var(--mf-pill); }
.mf-search input::placeholder { color: var(--mf-ink-3); }
.mf-search-clear {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: var(--mf-tap); height: var(--mf-tap); border: 0; border-radius: 50%; background: transparent; color: var(--mf-ink-3); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.mf-search-clear:hover { background: var(--mf-surface-2); color: var(--mf-ink); }
.mf-search-clear .mf-icon { position: static; transform: none; }

/* Start-a-discussion prompt */
.mf-prompt {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 12px 12px 12px 14px; border: 1px solid var(--mf-line); border-radius: var(--mf-radius-lg);
    background: var(--mf-surface); box-shadow: var(--mf-shadow); text-align: left; cursor: pointer; text-decoration: none !important;
}
.mf-prompt-field {
    flex: 1 1 auto; min-height: var(--mf-tap); display: flex; align-items: center; padding: 0 18px;
    border-radius: var(--mf-pill); background: var(--mf-surface-2); color: var(--mf-ink-3); font-size: 1.02rem;
}
.mf-prompt:hover .mf-prompt-field { background: var(--mf-surface-3); color: var(--mf-ink-2); }

/* ---------- Post card ---------- */
.mf-feed { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.mf-post {
    position: relative; padding: 20px 22px 14px;
    background: var(--mf-surface); border: 1px solid var(--mf-line); border-radius: var(--mf-radius-lg);
    box-shadow: var(--mf-shadow);
}
.mf-post:hover { border-color: var(--mf-line-strong); }
.mf-post-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; color: var(--mf-ink-3); font-size: 0.95rem; }
.mf-post-top .mf-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--mf-line-strong); }
.mf-post-top .mf-badge { margin-left: auto; }
.mf-post-title { overflow-wrap: anywhere; margin: 10px 0 6px; font-size: clamp(1.15rem, 2.2vw, 1.32rem) !important; line-height: 1.25 !important; }
.mf-post-title a { color: var(--mf-ink) !important; text-decoration: none; }
.mf-post-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
/* the whole card opens the thread; inner controls stay clickable above it */
.mf-post-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--mf-radius-lg); }
.mf-post-title a:focus-visible { box-shadow: none; }
.mf-post-title a:focus-visible::after { box-shadow: var(--mf-focus); }
.mf-post-excerpt {
    color: var(--mf-ink-2); font-size: 1rem; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mf-post-author { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--mf-ink) !important; text-decoration: none; font-weight: 700; min-height: var(--mf-tap); margin-bottom: -6px; }
.mf-post-author:hover span { text-decoration: underline; }
.mf-post-top .mf-chip { min-width: 0; }
.mf-post-top .mf-chip, .mf-post-top time, .mf-post .mf-actions, .mf-post .mf-thumbs { position: relative; z-index: 1; }
.mf-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; max-width: 520px; }
.mf-thumbs button {
    position: relative; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in;
    aspect-ratio: 4 / 3; background: var(--mf-surface-3);
}
.mf-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.mf-thumbs .mf-thumbs-more {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(10, 10, 10, 0.6); color: #ffffff; font-weight: 800; font-size: 1.2rem;
}

/* action row: like / replies / views / save / more */
.mf-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 12px -10px 0; }
.mf-act {
    display: inline-flex; align-items: center; gap: 8px; min-height: var(--mf-tap); padding: 0 12px;
    border: 0; border-radius: var(--mf-pill); background: transparent; color: var(--mf-ink-2) !important;
    font-weight: 700; font-size: 0.98rem; text-decoration: none; cursor: pointer; white-space: nowrap;
}
button.mf-act:hover, a.mf-act:hover { background: var(--mf-surface-2); color: var(--mf-ink) !important; }
.mf-act[aria-pressed="true"] { color: var(--mf-ink) !important; }
.mf-act[aria-pressed="true"] .mf-icon { fill: currentColor; }
.mf-act--static { cursor: default; color: var(--mf-ink-3) !important; }
.mf-actions .mf-act--end { margin-left: auto; }
@media (max-width: 599px) {
    .mf-post { padding: 16px 16px 10px; }
    .mf-act { min-width: var(--mf-tap); justify-content: center; padding: 0 10px; gap: 6px; }
    /* icon-only on phones, but the label stays the accessible name (visually hidden, not display: none) */
    .mf-act .mf-act-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .mf-post-top .mf-badge { margin-left: 0; }
}

/* ---------- Community card ---------- */
.mf-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.mf-ccard { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.mf-ccard-top { display: flex; align-items: center; gap: 14px; }
.mf-ccard h3 { font-size: 1.15rem; }
.mf-ccard h3 a { color: var(--mf-ink) !important; text-decoration: none; }
.mf-ccard h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mf-ccard h3 a:focus-visible { box-shadow: none; }
.mf-ccard h3 a:focus-visible::after { box-shadow: var(--mf-focus); }
.mf-ccard .mf-btn { position: relative; z-index: 1; }
.mf-ccard h3 a:hover { text-decoration: underline; }
.mf-ccard-meta { color: var(--mf-ink-3); font-size: 1rem; font-weight: 600; }
.mf-ccard-desc { color: var(--mf-ink-2); }
.mf-ccard .mf-btn { margin-top: auto; align-self: flex-start; }
.mf-clist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mf-clist li { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.mf-clist a.mf-clist-name { flex: 1 1 auto; min-width: 0; color: var(--mf-ink) !important; text-decoration: none; font-weight: 700; display: flex; flex-direction: column; justify-content: center; min-height: var(--mf-tap); }
.mf-clist a.mf-clist-name small { color: var(--mf-ink-3); font-weight: 600; font-size: 0.88rem; }
.mf-clist a.mf-clist-name:hover > span { text-decoration: underline; }

/* ---------- Forms ---------- */
.mf-form { display: grid; gap: 20px; }
.mf-field { display: grid; gap: 8px; }
.mf-label { font-weight: 750; font-size: 1rem; color: var(--mf-ink); }
.mf-label .mf-optional { font-weight: 600; color: var(--mf-ink-3); }
.mf-input, .mf-select, .mf-textarea {
    width: 100%; min-height: var(--mf-tap-lg); padding: 12px 16px;
    border-radius: 14px; border: 1.5px solid var(--mf-field-line);
    background: var(--mf-surface); font-size: 1.05rem; color: var(--mf-ink);
    -webkit-appearance: none; appearance: none;
}
.mf-textarea { min-height: 160px; resize: vertical; line-height: 1.55; }
.mf-select {
    padding-right: 48px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; background-size: 20px;
}
.mf-input:hover, .mf-select:hover, .mf-textarea:hover { border-color: var(--mf-ink-3); }
.mf-input:focus-visible, .mf-select:focus-visible, .mf-textarea:focus-visible {
    border-color: var(--mf-accent); box-shadow: 0 0 0 3px var(--mf-accent-soft); border-radius: 14px;
}
.mf-input[aria-invalid="true"], .mf-select[aria-invalid="true"], .mf-textarea[aria-invalid="true"] { border-color: var(--mf-danger); background: var(--mf-danger-soft); }
.mf-input::placeholder, .mf-textarea::placeholder { color: var(--mf-ink-3); }
.mf-help { color: var(--mf-ink-3); font-size: 1rem; }
.mf-error { display: flex; align-items: flex-start; gap: 8px; color: var(--mf-danger); font-size: 0.98rem; font-weight: 650; }
.mf-error .mf-icon { width: 18px; height: 18px; margin-top: 2px; }
.mf-field-foot { display: flex; justify-content: space-between; gap: 12px; }
.mf-counter { margin-left: auto; color: var(--mf-ink-3); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.mf-counter.is-over { color: var(--mf-danger); font-weight: 700; }
.mf-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 1rem; line-height: 1.45; }
.mf-check input {
    flex: 0 0 auto; width: 24px; height: 24px; margin: 0; border-radius: 7px; cursor: pointer;
    accent-color: var(--mf-ink);
}
.mf-check-wrap { padding: 4px 0; min-height: var(--mf-tap); display: flex; align-items: center; }
.mf-switch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; cursor: pointer; }
.mf-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mf-switch-track {
    flex: 0 0 auto; position: relative; width: 52px; height: 32px; border-radius: var(--mf-pill);
    background: var(--mf-field-line); transition: background-color 0.15s ease;
}
.mf-switch-track::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
    background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease;
}
.mf-switch input:checked + .mf-switch-track { background: var(--mf-ok); }
.mf-switch input:checked + .mf-switch-track::after { transform: translateX(20px); }
.mf-switch input:focus-visible + .mf-switch-track { box-shadow: var(--mf-focus); }
.mf-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
@media (max-width: 599px) {
    .mf-form-actions { flex-direction: column-reverse; align-items: stretch; }
    .mf-form-actions .mf-btn { width: 100%; }
}

/* Image picker (local preview only until media storage exists) */
.mf-imgpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.mf-imgpick-item { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--mf-surface-3); }
.mf-imgpick-item img { width: 100%; height: 100%; object-fit: cover; }
.mf-imgpick-remove {
    position: absolute; top: 6px; right: 6px; width: var(--mf-tap); height: var(--mf-tap); border: 0; border-radius: 50%;
    background: rgba(10, 10, 10, 0.72); color: #ffffff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.mf-imgpick-add {
    aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    border: 2px dashed var(--mf-field-line); border-radius: 14px; background: var(--mf-surface);
    color: var(--mf-ink-2); font-weight: 700; cursor: pointer; text-align: center; padding: 8px;
}
.mf-imgpick-add:hover { border-color: var(--mf-ink); color: var(--mf-ink); }
.mf-imgpick-add:focus-within { box-shadow: var(--mf-focus); }
.mf-imgpick-add input { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* ---------- Notices ---------- */
.mf-notice {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
    border-radius: var(--mf-radius); background: var(--mf-info-soft); color: var(--mf-ink-2); border: 1px solid var(--mf-line);
    font-size: 1rem;
}
.mf-notice .mf-icon { margin-top: 2px; }
.mf-notice strong { color: var(--mf-ink); }
.mf-notice--pending { background: var(--mf-warn-soft); color: var(--mf-warn-ink); border-color: var(--mf-warn-line); }
.mf-notice--pending strong { color: var(--mf-warn-ink); }
.mf-notice--error { background: var(--mf-danger-soft); color: var(--mf-danger); border-color: var(--mf-danger-line); }
.mf-notice--error strong { color: var(--mf-danger); }
.mf-notice--success, .mf-notice--ok { background: var(--mf-ok-soft); color: var(--mf-ok); border-color: var(--mf-ok-line); }
.mf-notice--success strong, .mf-notice--ok strong { color: var(--mf-ok); }

/* ---------- Empty / loading ---------- */
.mf-empty { padding: 44px 24px; text-align: center; display: grid; justify-items: center; gap: 12px; }
.mf-empty .mf-empty-icon {
    width: 64px; height: 64px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--mf-surface-2); color: var(--mf-ink-3);
}
.mf-empty .mf-empty-icon .mf-icon { width: 30px; height: 30px; }
.mf-empty h2, .mf-empty h3 { font-size: 1.25rem; }
.mf-empty p { color: var(--mf-ink-3); max-width: 36ch; }
.mf-skel { display: block; border-radius: 10px; background: var(--mf-surface-3); }
.mf-skel-card { padding: 22px; display: grid; gap: 12px; }
.mf-skel-card .mf-skel:nth-child(1) { width: 40%; height: 16px; }
.mf-skel-card .mf-skel:nth-child(2) { width: 85%; height: 22px; }
.mf-skel-card .mf-skel:nth-child(3) { width: 60%; height: 16px; }

/* ---------- Dialog ---------- */
.mf-dialog {
    width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0;
    border: 0; border-radius: var(--mf-radius-lg); background: var(--mf-surface); color: var(--mf-ink);
    box-shadow: var(--mf-shadow-lift);
}
.mf-dialog::backdrop { background: rgba(10, 10, 10, 0.55); }
html.mf-root:has(dialog[open]) { overflow: hidden; }
.mf-dialog, .mf-lightbox { overscroll-behavior: contain; }
.mf-dialog-body { padding: 26px; display: grid; gap: 18px; }
.mf-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mf-dialog-head h2 { font-size: 1.45rem; }
.mf-dialog-close {
    flex: 0 0 auto; width: var(--mf-tap); height: var(--mf-tap); margin: -8px -8px 0 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--mf-ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.mf-dialog-close:hover { background: var(--mf-surface-2); }
.mf-options { display: grid; gap: 8px; }
.mf-option {
    display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px;
    border: 1.5px solid var(--mf-line); border-radius: 14px; cursor: pointer; font-weight: 650;
}
.mf-option:hover { border-color: var(--mf-line-strong); }
.mf-option:has(input:checked) { border-color: var(--mf-ink); background: var(--mf-surface-2); }
.mf-option input { width: 22px; height: 22px; margin: 0; accent-color: var(--mf-ink); }
@media (max-width: 599px) {
    .mf-dialog { width: 100vw; max-width: 100vw; max-height: 92vh; max-height: 92dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
    .mf-dialog .mf-form-actions { position: sticky; bottom: 0; margin: 0 -18px calc(-22px - var(--mf-safe-bottom)); padding: 12px 18px calc(12px + var(--mf-safe-bottom)); background: var(--mf-surface); border-top: 1px solid var(--mf-line); }
    .mf-dialog-body { padding: 22px 18px calc(22px + var(--mf-safe-bottom)); }
}

/* ---------- Toast ---------- */
.mf-toast-host {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 200;
    display: grid; gap: 8px; width: min(480px, calc(100vw - 32px)); pointer-events: none;
}
.mf-toast {
    display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px;
    background: var(--mf-solid); color: var(--mf-solid-ink); font-weight: 600; box-shadow: var(--mf-shadow-lift); pointer-events: auto;
}
.mf-toast .mf-icon { color: var(--mf-accent); }
.mf-toast--pending .mf-icon { color: inherit; opacity: 0.75; }
@media (max-width: 899px) { .mf-toast-host { bottom: calc(var(--mf-bottom-h) + var(--mf-safe-bottom) + 12px); } }

/* ---------- Lightbox ---------- */
.mf-lightbox {
    width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border: 0;
    background: rgba(5, 6, 6, 0.96); color: #ffffff;
}
.mf-lightbox::backdrop { background: rgba(5, 6, 6, 0.96); }
.mf-lightbox-inner { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 72px 72px 88px; }
.mf-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; }
.mf-lightbox-btn {
    position: absolute; width: 52px; height: 52px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, 0.12); color: #ffffff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.mf-lightbox-btn:hover { background: rgba(255, 255, 255, 0.22); }
.mf-lightbox-btn:focus-visible { box-shadow: 0 0 0 3px #0a0a0a, 0 0 0 6px #ffffff; }
.mf-lightbox-close { top: 16px; right: 16px; }
.mf-lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.mf-lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }
.mf-lightbox-count { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); font-weight: 700; font-size: 1rem; }
@media (max-width: 599px) {
    .mf-lightbox-inner { padding: 72px 12px 96px; }
    .mf-lightbox-prev, .mf-lightbox-next { top: auto; bottom: 16px; transform: none; }
    .mf-lightbox-prev { left: 16px; }
    .mf-lightbox-next { right: 16px; }
}

/* ---------- Thread detail ---------- */
.mf-thread { padding: 26px 28px; }
.mf-thread h1 { overflow-wrap: anywhere; margin: 14px 0 16px; font-size: clamp(1.7rem, 3.6vw, 2.3rem); }
.mf-byline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mf-byline-name { display: flex; flex-direction: column; line-height: 1.3; }
.mf-byline-name a { color: var(--mf-ink) !important; font-weight: 750; text-decoration: none; }
.mf-byline-name a:hover { text-decoration: underline; }
.mf-byline-name time, .mf-byline-name small { color: var(--mf-ink-3); font-size: 0.92rem; }
.mf-prose { margin-top: 20px; font-size: 1.0625rem; line-height: 1.7; color: var(--mf-ink); overflow-wrap: anywhere; }
.mf-prose p + p { margin-top: 1em; }
.mf-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.mf-gallery button { padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3; background: var(--mf-surface-3); }
/* one photo is shown whole (never cropped); several are a grid of thumbnails, each whole in the viewer */
.mf-gallery button:only-child { grid-column: 1 / -1; aspect-ratio: auto; background: var(--mf-surface-2); }
.mf-gallery button:only-child img { height: auto; max-height: min(70vh, 640px); object-fit: contain; margin: 0 auto; }
.mf-gallery img { width: 100%; height: 100%; object-fit: cover; }
.mf-thread-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; color: var(--mf-ink-3); font-size: 0.95rem; font-weight: 650; }
.mf-thread-stats span { display: inline-flex; align-items: center; gap: 6px; }
.mf-thread-stats .mf-icon { width: 18px; height: 18px; }
.mf-thread .mf-actions { border-top: 1px solid var(--mf-line); padding-top: 8px; margin: 18px -10px 0; }
@media (max-width: 599px) { .mf-thread { padding: 20px 18px; } }

.mf-replies-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.mf-replies { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mf-reply { padding: 20px 22px 10px; }
.mf-reply.is-answer { border-color: var(--mf-ok-line); box-shadow: inset 4px 0 0 var(--mf-ok), var(--mf-shadow); }
.mf-reply-answer-tag { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--mf-ok); font-weight: 800; font-size: 1rem; }
.mf-reply .mf-prose { margin-top: 12px; font-size: 1.03rem; }
.mf-reply .mf-actions { margin-top: 6px; }
.mf-reply-children { list-style: none; margin: 8px 0 6px 18px; padding: 0 0 0 18px; border-left: 2px solid var(--mf-line); display: grid; gap: 4px; }
.mf-reply-children .mf-reply { padding: 14px 0 4px; border: 0; box-shadow: none; background: transparent; }
.mf-reply-child-to { color: var(--mf-ink-3); font-size: 0.92rem; }
.mf-reply.is-new { border-color: var(--mf-ink-3); }
@media (max-width: 599px) {
    .mf-reply { padding: 16px 16px 8px; }
    .mf-reply-children { margin-left: 4px; padding-left: 14px; }
}

.mf-composer { padding: 22px; display: grid; gap: 14px; }
.mf-composer-head { display: flex; align-items: center; gap: 12px; }
.mf-composer .mf-textarea { min-height: 130px; }
.mf-composer-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mf-composer-tools .mf-btn[type="submit"] { margin-left: auto; }
.mf-attach { position: relative; }
.mf-attach input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mf-attach:focus-within { box-shadow: var(--mf-focus); border-radius: var(--mf-pill); }
.mf-gate { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px; }
.mf-gate h2, .mf-gate h3 { font-size: 1.2rem; }
.mf-gate-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 599px) { .mf-gate-actions { width: 100%; } .mf-gate-actions .mf-btn { flex: 1 1 0; } }

/* Community hero */
.mf-chero { padding: 26px 28px; display: grid; gap: 18px; }
.mf-chero-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mf-chero-title { flex: 1 1 260px; min-width: 0; }
.mf-chero-title h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.mf-chero-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; color: var(--mf-ink-3); font-weight: 650; }
.mf-chero-desc { color: var(--mf-ink-2); font-size: 1.05rem; max-width: 60ch; }
.mf-chero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 599px) {
    .mf-chero { padding: 20px 18px; }
    .mf-chero-actions .mf-btn { flex: 1 1 0; }
    .mf-chero .mf-cicon--lg { width: 56px; height: 56px; border-radius: 16px; }
}

/* Rules list */
.mf-rules { list-style: none; margin: 0; padding: 0; counter-reset: mf-rule; display: grid; gap: 4px; }
.mf-rules li { counter-increment: mf-rule; display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; font-weight: 650; color: var(--mf-ink); }
.mf-rules li::before {
    content: counter(mf-rule); flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mf-surface-2); color: var(--mf-ink-2); font-size: 0.88rem; font-weight: 800;
}

/* Welcome card (right rail) */
.mf-welcome { padding: 22px; display: grid; gap: 14px; background: var(--mf-feature); color: var(--mf-feature-ink); border-color: var(--mf-feature); }
.mf-welcome h2 { color: var(--mf-feature-ink); font-size: 1.35rem; }
.mf-welcome p { color: rgba(255, 255, 255, 0.78); }
.mf-welcome .mf-btn--primary { box-shadow: none; }
.mf-welcome .mf-btn--ghost { background: transparent; color: #ffffff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.mf-welcome .mf-btn--ghost:hover { background: rgba(255, 255, 255, 0.08); }
.mf-welcome .mf-help { color: rgba(255, 255, 255, 0.7); }
.mf-welcome :focus-visible { box-shadow: 0 0 0 3px var(--mf-feature), 0 0 0 6px #ffffff; }

/* Mobile community chips (replaces the left rail below 1180px) */
.mf-chiprow { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--mf-gutter) * -1); padding: 2px var(--mf-gutter); }
.mf-chiprow::-webkit-scrollbar { display: none; }
.mf-chiprow a {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: var(--mf-tap); padding: 0 16px 0 8px;
    border-radius: var(--mf-pill); background: var(--mf-surface); border: 1px solid var(--mf-line);
    color: var(--mf-ink) !important; text-decoration: none; font-weight: 700; white-space: nowrap;
}
.mf-chiprow a:hover { border-color: var(--mf-line-strong); }
@media (min-width: 1180px) { .mf-chiprow { display: none; } }

/* Similar-discussion suggestions (create flows) */
.mf-suggest { display: grid; gap: 6px; }
.mf-suggest h3 { font-size: 1rem; }
.mf-suggest ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mf-suggest a {
    display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px;
    border-radius: 14px; background: var(--mf-surface-2); color: var(--mf-ink) !important; text-decoration: none; font-weight: 650;
}
.mf-suggest a:hover { background: var(--mf-surface-3); }
.mf-suggest a small { margin-left: auto; color: var(--mf-ink-3); font-weight: 600; white-space: nowrap; }

/* ---------- Footer ---------- */
.mf-footer { border-top: 1px solid var(--mf-line); background: var(--mf-surface); }
.mf-footer-inner {
    max-width: var(--mf-max); margin: 0 auto; padding: 26px var(--mf-gutter);
    display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap;
    color: var(--mf-ink-3); font-size: 0.95rem;
}
.mf-footer nav { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.mf-footer a { display: inline-flex; align-items: center; min-height: var(--mf-tap); padding: 0 8px; color: var(--mf-ink-2) !important; text-decoration: none; font-weight: 650; }
.mf-footer a:hover { text-decoration: underline; color: var(--mf-ink) !important; }

/* ---------- MY LED KIT additions ---------- */
/* forum homepage hero */
.mf-page-head--hero { display: block; }
.mf-page-head--hero h1 { font-size: clamp(2rem, 4.2vw, 2.8rem); letter-spacing: -0.03em; }
.mf-page-sub { margin-top: 8px !important; color: var(--mf-ink-3); font-size: 1.08rem; max-width: 62ch; }
/* "Show more discussions" */
.mf-more { display: flex; justify-content: center; margin-top: 16px; }
/* a deleted account's name, not a link */
.mf-author--gone { color: var(--mf-ink-3) !important; font-weight: 600; }
.mf-reply--gone .mf-help { display: flex; align-items: center; gap: 8px; }
.mf-edited { margin-left: 8px; color: var(--mf-ink-3); font-size: 0.88rem; }
/* report dialog */
.mf-options--bare { border: 0; padding: 0; margin: 0; }
.mf-options--bare legend { margin-bottom: 8px; }
.mf-textarea--short { min-height: 96px; }
/* formatting toolbar over a textarea */
.mf-toolbar { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: -2px; }
.mf-tool {
    display: inline-flex; align-items: center; justify-content: center; width: var(--mf-tap); height: var(--mf-tap);
    border: 0; border-radius: 12px; background: transparent; color: var(--mf-ink-2); cursor: pointer;
}
.mf-tool:hover { background: var(--mf-surface-2); color: var(--mf-ink); }
.mf-tool .mf-icon { width: 18px; height: 18px; }
/* formatted bodies (forum-format.js) */
.mf-prose strong { font-weight: 700; }
.mf-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; padding: 1px 6px; border-radius: 6px; background: var(--mf-surface-2); }
.mf-prose pre { margin: 1em 0 0; padding: 14px 16px; border-radius: 12px; background: var(--mf-surface-2); overflow-x: auto; }
.mf-prose pre code { padding: 0; background: none; font-size: 0.9rem; }
.mf-prose blockquote { margin: 1em 0 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--mf-line-strong); color: var(--mf-ink-2); }
.mf-prose ul, .mf-prose ol { margin: 1em 0 0; padding-left: 1.4em; }
.mf-prose li + li { margin-top: 4px; }
.mf-prose > :first-child { margin-top: 0; }
.mf-prose a { word-break: break-word; }
.mf-prose p + p, .mf-prose p + ul, .mf-prose p + ol, .mf-prose ul + p, .mf-prose ol + p, .mf-prose blockquote + p, .mf-prose pre + p { margin-top: 1em; }
/* community footer strip, above the storefront footer */
.mf-footer { margin-top: 0; }
/* the server-rendered copy (Phase 5) is replaced by the script's own render */
.mf-ssr { display: contents; }