/**
 * NKST Community — Mobile-First Design Foundation
 * ══════════════════════════════════════════════════════════════
 * Phase 2 deliverable. This file is ADDITIVE ONLY: every class here
 * is namespaced `.nkst-*` (and every token `--nkst-*`) so nothing in
 * it can collide with or override existing selectors in style.css /
 * mobile-enhancements.css / admin.css. Existing components (the post
 * feed, reactions, comments, chat, status stories, admin tables) are
 * NOT duplicated here — they already work and already follow most of
 * these same conventions; this file is the shared vocabulary for
 * NEW NKST Community screens built in later phases.
 *
 * Load order (see includes/header.php): style.css → design-system.css
 * → mobile-enhancements.css → admin.css (admin pages only). Existing
 * mobile-enhancements.css rules always load last among the shared
 * sheets, so this file can never regress anything already working.
 *
 * Breakpoint convention reused from the rest of the codebase (do not
 * invent new breakpoints elsewhere — this is the one already load-
 * bearing across mobile-enhancements.css and admin.css):
 *   ≤480px   small phones
 *   ≤900px   mobile / tablet-portrait — PRIMARY target (nav collapses
 *            to the bottom tab bar below this width)
 *   901–1199px small desktop / tablet-landscape
 *   ≥1200px  desktop
 */

:root {
    /* ── Typography scale (mobile-first — see per-guideline mapping) ── */
    --nkst-font-2xs: 12px;  /* small metadata: timestamps, view counts */
    --nkst-font-xs:  13px;  /* nav labels */
    --nkst-font-sm:  14px;  /* normal UI text, low end */
    --nkst-font-base: 15px; /* post content / names, low end */
    --nkst-font-md:  16px;  /* post content / names, high end. Also the
                               floor for any real <input>/<textarea> —
                               iOS Safari auto-zooms the page on focus
                               for any text input under 16px. */
    --nkst-font-lg:  19px;  /* section headings */
    --nkst-font-xl:  22px;  /* major headings, low end */
    --nkst-font-2xl: 26px;  /* major headings, high end — do not exceed
                               without a specific design reason */

    /* ── Spacing scale (compact, social-app density) ── */
    --nkst-space-1: 4px;
    --nkst-space-2: 8px;
    --nkst-space-3: 12px;
    --nkst-space-4: 16px;
    --nkst-space-5: 20px;
    --nkst-space-6: 24px;

    /* ── Radius ── */
    --nkst-radius-sm: 8px;
    --nkst-radius-md: 12px;
    --nkst-radius-lg: 16px;
    --nkst-radius-full: 999px;

    /* ── Shadow ── */
    --nkst-shadow-sm: 0 1px 2px rgba(0,0,0,.08);
    --nkst-shadow-md: 0 2px 10px rgba(0,0,0,.10);
    --nkst-shadow-lg: 0 8px 28px rgba(0,0,0,.16);

    /* ── Color aliases — single source of truth stays style.css's
       :root; these just give the new components stable names to use
       so a future palette change only has to happen in one place. ── */
    --nkst-color-primary:   var(--primary-color, #1e3a8a);
    --nkst-color-secondary: var(--secondary-color, #3b82f6);
    --nkst-color-accent:    var(--accent-color, #f59e0b);
    --nkst-color-success:   var(--success-color, #10b981);
    --nkst-color-danger:    var(--danger-color, #ef4444);
    --nkst-color-text:      var(--text-primary, #1f2937);
    --nkst-color-text-muted: var(--text-secondary, #6b7280);
    --nkst-color-border:    var(--border-color, #e5e7eb);
    --nkst-color-surface:   #ffffff;
    --nkst-color-surface-alt: #f7f7f8;

    /* ── Touch target ── the accessible minimum for a PRIMARY tap
       target (buttons meant to be pressed with a thumb). Compact
       inline controls (an emoji-reaction option, a small icon inside
       a dense row) should NOT use this — see .nkst-icon-btn below.
       This mirrors the site-wide rule in mobile-enhancements.css
       (`a, button, input, select, textarea, .btn { min-height/width:
       44px }`), which is left untouched here; this token just gives
       new NKST Community components the same number by name. ── */
    --nkst-tap-min: 44px;

    /* ── Avatar sizes ── */
    --nkst-avatar-xs: 24px;
    --nkst-avatar-sm: 32px;
    --nkst-avatar-md: 40px;
    --nkst-avatar-lg: 56px;
    --nkst-avatar-xl: 80px;

    /* ── Z-index scale — chosen to sit alongside values already in
       production use (bottom nav 9990, image/PWA modals 9999) so
       nothing here can end up fighting an existing overlay. Use these
       for any NEW dropdown/sheet/modal/toast instead of guessing a
       number, which is exactly how the header.php/mobile-enhancements
       duplicate bottom-nav z-index bug happened. ── */
    --nkst-z-dropdown: 9000;
    --nkst-z-sheet-backdrop: 9500;
    --nkst-z-sheet: 9501;
    --nkst-z-modal-backdrop: 9600;
    --nkst-z-modal: 9601;
    --nkst-z-toast: 9995;
}

/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY UTILITIES
   ══════════════════════════════════════════════════════════════ */
.nkst-text-2xs  { font-size: var(--nkst-font-2xs); }
.nkst-text-xs   { font-size: var(--nkst-font-xs); }
.nkst-text-sm   { font-size: var(--nkst-font-sm); }
.nkst-text-base { font-size: var(--nkst-font-base); }
.nkst-text-md   { font-size: var(--nkst-font-md); }
.nkst-heading-sm { font-size: var(--nkst-font-lg); font-weight: 700; line-height: 1.3; }
.nkst-heading-md { font-size: var(--nkst-font-xl); font-weight: 700; line-height: 1.3; }
.nkst-heading-lg { font-size: var(--nkst-font-2xl); font-weight: 800; line-height: 1.25; }
.nkst-text-muted { color: var(--nkst-color-text-muted); }

/* ══════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════ */
.nkst-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nkst-space-2);
    min-height: var(--nkst-tap-min);
    padding: var(--nkst-space-2) var(--nkst-space-4);
    border: none;
    border-radius: var(--nkst-radius-md);
    font-size: var(--nkst-font-sm);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    background: var(--nkst-color-surface-alt);
    color: var(--nkst-color-text);
    transition: transform .08s ease, opacity .15s ease, background .15s ease;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.nkst-btn:active { transform: scale(.97); }
.nkst-btn-primary   { background: var(--nkst-color-primary); color: #fff; }
.nkst-btn-secondary { background: var(--nkst-color-secondary); color: #fff; }
.nkst-btn-danger    { background: var(--nkst-color-danger); color: #fff; }
.nkst-btn-ghost     { background: transparent; color: var(--nkst-color-primary); }
.nkst-btn-outline   { background: transparent; border: 1.5px solid var(--nkst-color-border); color: var(--nkst-color-text); }
.nkst-btn-sm        { min-height: 36px; padding: var(--nkst-space-1) var(--nkst-space-3); font-size: var(--nkst-font-xs); }
.nkst-btn-block     { display: flex; width: 100%; }
.nkst-btn:disabled  { opacity: .5; cursor: not-allowed; transform: none; }

/* Compact icon-only button — the safe escape hatch from the global
   44x44 touch-target rule for a small control inside an already-dense
   row (e.g. a reaction/emoji option, an inline row action). Using
   this class instead of a bare <button> avoids the exact bug found in
   Phase 1's audit, where an unstyled emoji-picker button was forced
   up to 44x44 and overflowed its popup off the edge of the screen. */
.nkst-icon-btn {
    min-width: unset !important;
    min-height: unset !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--nkst-radius-full);
    background: transparent;
    color: var(--nkst-color-text-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.nkst-icon-btn:active { background: rgba(0,0,0,.06); }

/* ══════════════════════════════════════════════════════════════
   FORM CONTROLS
   ══════════════════════════════════════════════════════════════ */
.nkst-input,
.nkst-textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;           /* critical inside a flex/grid row — without
                                this a text input refuses to shrink below
                                its intrinsic content width and can push
                                siblings off-screen or force horizontal
                                scroll on a narrow phone. */
    box-sizing: border-box;
    padding: var(--nkst-space-3) var(--nkst-space-4);
    border: 1px solid var(--nkst-color-border);
    border-radius: var(--nkst-radius-md);
    font-family: inherit;
    font-size: var(--nkst-font-md); /* 16px floor — prevents iOS Safari
                                        zooming the page in on focus */
    line-height: 1.5;
    color: var(--nkst-color-text);
    background: var(--nkst-color-surface);
    -webkit-appearance: none;
    appearance: none;
}
.nkst-input:focus,
.nkst-textarea:focus {
    outline: none;
    border-color: var(--nkst-color-secondary);
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.nkst-textarea { resize: vertical; min-height: 88px; }
.nkst-field-row {
    display: flex;
    align-items: center;
    gap: var(--nkst-space-2);
    min-width: 0; /* the row itself must also allow its input child to shrink */
}
.nkst-field-row > .nkst-input,
.nkst-field-row > .nkst-textarea { flex: 1; min-width: 0; }

/* ══════════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════════ */
.nkst-card {
    background: var(--nkst-color-surface);
    border-radius: var(--nkst-radius-lg);
    box-shadow: var(--nkst-shadow-sm);
    overflow: hidden;
}
.nkst-card-body { padding: var(--nkst-space-4); }
/* Edge-to-edge on small phones, matching the existing post-card
   convention (mobile-enhancements.css does the same for .post-card)
   rather than floating a card with side margins on a 360px screen. */
@media (max-width: 480px) {
    .nkst-card { border-radius: 0; }
}

/* ══════════════════════════════════════════════════════════════
   AVATARS
   ══════════════════════════════════════════════════════════════ */
.nkst-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--nkst-color-primary), var(--nkst-color-secondary));
    color: #fff;
    font-weight: 700;
    overflow: hidden;
    width: var(--nkst-avatar-md);
    height: var(--nkst-avatar-md);
    font-size: var(--nkst-font-sm);
}
.nkst-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nkst-avatar-xs { width: var(--nkst-avatar-xs); height: var(--nkst-avatar-xs); font-size: var(--nkst-font-2xs); }
.nkst-avatar-sm { width: var(--nkst-avatar-sm); height: var(--nkst-avatar-sm); font-size: var(--nkst-font-xs); }
.nkst-avatar-lg { width: var(--nkst-avatar-lg); height: var(--nkst-avatar-lg); font-size: var(--nkst-font-lg); }
.nkst-avatar-xl { width: var(--nkst-avatar-xl); height: var(--nkst-avatar-xl); font-size: var(--nkst-font-xl); }

/* ══════════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════════ */
.nkst-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--nkst-radius-full);
    background: var(--nkst-color-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.nkst-badge-dot { min-width: 8px; width: 8px; height: 8px; padding: 0; }

/* ══════════════════════════════════════════════════════════════
   NAVIGATION TABS — generic horizontal tab bar (unit sub-nav, feed
   filters, etc.). Not a replacement for the existing top navbar /
   bottom tab bar, which stay as-is.
   ══════════════════════════════════════════════════════════════ */
.nkst-tabs {
    display: flex;
    gap: var(--nkst-space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    padding: var(--nkst-space-2) var(--nkst-space-3);
}
.nkst-tabs::-webkit-scrollbar { display: none; }
.nkst-tab {
    flex-shrink: 0;
    padding: var(--nkst-space-2) var(--nkst-space-4);
    border-radius: var(--nkst-radius-full);
    font-size: var(--nkst-font-sm);
    font-weight: 600;
    color: var(--nkst-color-text-muted);
    background: var(--nkst-color-surface-alt);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.nkst-tab.active { background: var(--nkst-color-primary); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   DROPDOWNS — anchored to the trigger's edge, never centered. A
   centered popup clips off-screen the moment its trigger isn't near
   the horizontal middle of the viewport (this is exactly the bug
   Phase 1 found and fixed in the feed's reaction picker). Default to
   left-anchored; add .nkst-dropdown-right to anchor the other way
   when the trigger sits near the right edge instead.
   ══════════════════════════════════════════════════════════════ */
.nkst-dropdown { position: relative; display: inline-block; }
.nkst-dropdown-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 180px;
    max-width: calc(100vw - 2 * var(--nkst-space-4));
    background: var(--nkst-color-surface);
    border-radius: var(--nkst-radius-md);
    box-shadow: var(--nkst-shadow-lg);
    z-index: var(--nkst-z-dropdown);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
}
.nkst-dropdown-right .nkst-dropdown-panel { left: auto; right: 0; }
.nkst-dropdown-panel.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.nkst-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--nkst-space-2);
    padding: var(--nkst-space-3) var(--nkst-space-4);
    font-size: var(--nkst-font-sm);
    color: var(--nkst-color-text);
    cursor: pointer;
}
.nkst-dropdown-item:active { background: var(--nkst-color-surface-alt); }
/* When used on a native <button> (Phase 5 share/send sheets) rather
   than an <a>/<div>, strip the browser's default button chrome so it
   reads the same as the anchor-based version. */
button.nkst-dropdown-item {
    background: none;
    border: none;
    text-align: left;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

/* Composer audience selector (Phase 5) */
.nkst-composer-audience select.nkst-input { font-weight: 600; }

/* Shared-post embed inside a post card (Phase 5) */
.nkst-shared-embed {
    margin-top: var(--nkst-space-3);
    border: 1px solid var(--nkst-color-border);
    border-radius: var(--nkst-radius-md);
    overflow: hidden;
    background: var(--nkst-color-surface);
}
.nkst-shared-embed-unavailable { background: var(--nkst-color-surface-alt); }

/* ══════════════════════════════════════════════════════════════
   MODALS — mobile gets a near-fullscreen sheet-like dialog rather
   than a small centered box (a small centered modal on a 360px phone
   leaves a tiny, hard-to-tap content area); desktop gets the classic
   centered card.
   ══════════════════════════════════════════════════════════════ */
.nkst-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: var(--nkst-z-modal-backdrop);
    align-items: center;
    justify-content: center;
}
.nkst-modal-backdrop.open { display: flex; }
.nkst-modal {
    position: relative;
    z-index: var(--nkst-z-modal);
    background: var(--nkst-color-surface);
    width: 100%;
    max-height: 100vh;
    overflow-y: auto;
    border-radius: 0;
    padding: var(--nkst-space-4);
    padding-bottom: calc(var(--nkst-space-4) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 601px) {
    .nkst-modal {
        width: auto;
        min-width: 360px;
        max-width: 560px;
        max-height: 85vh;
        border-radius: var(--nkst-radius-lg);
    }
}

/* ══════════════════════════════════════════════════════════════
   BOTTOM SHEETS — generalizes the pattern already proven in
   pages/status.php's upload sheet (.su-sheet). Slides up from the
   bottom, clears the fixed bottom nav + device safe area.
   ══════════════════════════════════════════════════════════════ */
.nkst-sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--nkst-z-sheet-backdrop);
    background: rgba(0,0,0,.5);
    align-items: flex-end;
    justify-content: center;
}
.nkst-sheet-backdrop.open { display: flex; }
.nkst-sheet {
    position: relative;
    z-index: var(--nkst-z-sheet);
    background: var(--nkst-color-surface);
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--nkst-radius-lg) var(--nkst-radius-lg) 0 0;
    /* Clears the fixed bottom nav (56px) + device safe area, same
       reasoning as .su-sheet in status.php. */
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    animation: nkstSheetUp .25s ease;
}
@keyframes nkstSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.nkst-sheet-handle {
    width: 38px;
    height: 4px;
    background: var(--nkst-color-border);
    border-radius: var(--nkst-radius-full);
    margin: var(--nkst-space-3) auto var(--nkst-space-1);
}

/* ══════════════════════════════════════════════════════════════
   LOADING & EMPTY STATES
   ══════════════════════════════════════════════════════════════ */
.nkst-skeleton {
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
    background-size: 400% 100%;
    animation: nkstShimmer 1.4s ease infinite;
    border-radius: var(--nkst-radius-sm);
}
@keyframes nkstShimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
.nkst-spinner {
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--nkst-color-border);
    border-top-color: var(--nkst-color-primary);
    border-radius: 50%;
    animation: nkstSpin .7s linear infinite;
}
@keyframes nkstSpin { to { transform: rotate(360deg); } }
.nkst-empty {
    text-align: center;
    padding: var(--nkst-space-6) var(--nkst-space-4);
    color: var(--nkst-color-text-muted);
}
.nkst-empty i { font-size: 2.25rem; opacity: .35; margin-bottom: var(--nkst-space-3); display: block; }
.nkst-empty p { font-size: var(--nkst-font-sm); }

/* ══════════════════════════════════════════════════════════════
   PAGE-LEVEL SPACING FIXES (Phase 2)
   ══════════════════════════════════════════════════════════════ */
/* index.php hero: replaces an eight-<br> spacing hack that left a
   measured ~226px dead gap between the heading and the call-to-action
   buttons on a 390px-wide phone — nearly half the hero section was
   empty space, directly against the "no large empty areas" rule. */
.nkst-hero-buttons { margin-top: var(--nkst-space-4); }
@media (min-width: 601px) {
    .nkst-hero-buttons { margin-top: var(--nkst-space-6); }
}

/* ══════════════════════════════════════════════════════════════
   NKST COMMUNITY HOME FEED (Phase 4)
   ══════════════════════════════════════════════════════════════ */
.nkst-community-home-bar {
    padding: var(--nkst-space-4) var(--nkst-space-4) var(--nkst-space-2);
}
.nkst-community-home-bar h1 { margin: 0 0 2px; }
.nkst-community-home-bar p { margin: 0; }

/* Post composer prompt — a fake input that opens the real composer
   sheet, not a real <input> (avoids a real text field the user could
   accidentally start typing into before the sheet with the real
   full-width textarea has opened). */
.nkst-composer { padding: var(--nkst-space-3) var(--nkst-space-3) var(--nkst-space-2); }
.nkst-composer-prompt {
    display: flex;
    align-items: center;
    gap: var(--nkst-space-3);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.nkst-composer-placeholder {
    flex: 1;
    min-width: 0;
    background: var(--nkst-color-surface-alt);
    border-radius: var(--nkst-radius-full);
    padding: var(--nkst-space-3) var(--nkst-space-4);
    color: var(--nkst-color-text-muted);
    font-size: var(--nkst-font-base);
}
.nkst-composer-quick-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--nkst-space-1);
    margin-top: var(--nkst-space-3);
    padding-top: var(--nkst-space-2);
    border-top: 1px solid var(--nkst-color-border);
}
.nkst-composer-quick-actions button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: var(--nkst-space-2);
    border: none;
    background: none;
    border-radius: var(--nkst-radius-sm);
    font-size: var(--nkst-font-xs);
    font-weight: 600;
    color: var(--nkst-color-text-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.nkst-composer-quick-actions button:active { background: var(--nkst-color-surface-alt); }
@media (max-width: 480px) {
    /* Icon-only on very small phones — "Photo"/"Video"/"Event"/"Prayer"
       labels at 4-across would wrap to two lines and look cramped. */
    .nkst-composer-quick-actions button span { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   MEMBER PROFILE (Phase 6)
   ══════════════════════════════════════════════════════════════ */
/* Deliberately compact — "avoid oversized cover areas / excessive
   vertical space" from the brief. Facebook's cover is ~350px; this
   is well under half that even on desktop. */
.nkst-cover {
    position: relative;
    width: 100%;
    height: 120px;
    background: linear-gradient(135deg, var(--nkst-color-primary), var(--nkst-color-secondary));
    overflow: hidden;
}
.nkst-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nkst-cover-edit-btn {
    position: absolute;
    bottom: var(--nkst-space-2);
    right: var(--nkst-space-2);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--nkst-radius-full);
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: var(--nkst-font-2xs);
    font-weight: 600;
    border: none;
    cursor: pointer;
}
@media (min-width: 601px) {
    .nkst-cover { height: 200px; }
}

/* Compact profile tab bar — used for Posts/About/Photos/Videos/Activity */
.nkst-profile-tabs {
    display: flex;
    gap: var(--nkst-space-1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 var(--nkst-space-2);
    border-bottom: 1px solid var(--nkst-color-border);
}
.nkst-profile-tabs::-webkit-scrollbar { display: none; }
.nkst-profile-tab {
    flex-shrink: 0;
    padding: var(--nkst-space-3) var(--nkst-space-3);
    font-size: var(--nkst-font-sm);
    font-weight: 700;
    color: var(--nkst-color-text-muted);
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.nkst-profile-tab.active { color: var(--nkst-color-primary); border-bottom-color: var(--nkst-color-primary); }

/* Photos/Videos tab grid */
.nkst-media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
}
.nkst-media-grid-item {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
}
.nkst-media-grid-item img, .nkst-media-grid-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.nkst-media-grid-item .nkst-video-badge {
    position: absolute; top: 6px; right: 6px; color: #fff; font-size: .9rem;
    text-shadow: 0 1px 3px rgba(0,0,0,.8);
}

/* Activity list */
.nkst-activity-item {
    display: flex;
    align-items: flex-start;
    gap: var(--nkst-space-3);
    padding: var(--nkst-space-3) var(--nkst-space-4);
    border-bottom: 1px solid var(--nkst-color-border);
}
.nkst-activity-icon {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .85rem;
}
.nkst-activity-text { font-size: var(--nkst-font-sm); color: var(--nkst-color-text); }
.nkst-activity-time { font-size: var(--nkst-font-2xs); color: var(--nkst-color-text-muted); margin-top: 2px; }

/* Respect reduced-motion preference for all animated components above */
@media (prefers-reduced-motion: reduce) {
    .nkst-skeleton, .nkst-spinner, .nkst-sheet { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Phase 14: Desktop three-column NKST Community layout.
   Mobile-first: the DEFAULT (no media query) rules below are the
   mobile/single-column rules — identical in spirit to how every
   other .nkst-* component in this file works. The three-column grid
   only switches on at min-width breakpoints, matching includes/
   header.php's own existing 900px desktop-nav cutoff so there's no
   in-between zone where the top nav is "desktop" but the layout is
   still forced single-column, or vice versa.

   Breakpoints (tested at each): ≤899px mobile/small tablet (unchanged
   single column), 900–991px large tablet (centered single column,
   sidebars hidden — not enough width for even one comfortably),
   992–1279px laptop (center + right column), ≥1280px desktop (full
   three columns).
═══════════════════════════════════════════════════════════════ */
.nkst-home-wrap { max-width: 1400px; margin: 0 auto; padding: 0 1rem; }
.nkst-home-layout { display: block; }
.nkst-left-col, .nkst-right-col { display: none; }
.nkst-center-col { width: 100%; }

@media (min-width: 900px) {
    .nkst-home-wrap { padding: 1rem 1.5rem; }
    .nkst-center-col .feed-container { max-width: 640px; margin: 0 auto; }
}

/* Note: .nkst-left-col is display:none below 1280px, which removes it
   from grid flow entirely — grid-template-columns must match however
   many columns are ACTUALLY visible at each tier, in DOM order, or the
   remaining tracks silently take on the wrong widths (found via a real
   screenshot: the right sidebar rendered far too wide and the center
   feed too narrow before this was corrected). 992–1279px has exactly
   2 visible columns (center, right); 1280px+ has all 3. */
@media (min-width: 992px) {
    /* align-items was 'start' — that caps each grid column's height to
       its own content, leaving a sticky sidebar no taller sibling to
       "stick within" as the page scrolls (confirmed via a live scroll
       test: the sidebar just moved with the page instead of pinning).
       'stretch' (the grid default) lets the sidebar's containing block
       match the tallest column (normally the feed), giving sticky the
       room it needs. */
    .nkst-home-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; align-items: stretch; }
    .nkst-center-col .feed-container { max-width: 680px; margin: 0 auto; }
    .nkst-right-col { display: block; min-width: 0; }
    /* Final audit fix: this element previously had its own
       overflow-y:auto — per the CSS spec, position:sticky resolves
       against the element's OWN scrollport once it has one, not the
       page's, so a sticky element can never scroll itself
       (confirmed broken via a real scroll test, then fixed by
       removing the self-overflow). A sidebar taller than the viewport
       now simply stops being sticky once its natural bottom is
       reached — the standard, expected sticky-sidebar behavior. */
    .nkst-right-col-inner { position: sticky; top: 76px; align-self: start; display: flex; flex-direction: column; gap: 1rem; }
}

@media (min-width: 1280px) {
    .nkst-home-layout { grid-template-columns: 260px minmax(0, 1fr) 300px; }
    .nkst-left-col { display: block; min-width: 0; }
    /* align-self:start keeps this element at its own natural content
       height even though its stretched parent (.nkst-left-col, from
       align-items:stretch above) is now as tall as the grid row's
       tallest column — without it, this child would itself stretch to
       fill 100% of that taller parent, leaving sticky no spare height
       to move within (confirmed: the right sidebar happened to already
       be tall enough not to need this, the left one visibly did not). */
    .nkst-left-col-inner { position: sticky; top: 76px; align-self: start; padding-right: .5rem; }
}

/* Left column */
.nkst-left-profile { display: flex; align-items: center; gap: .65rem; padding: .5rem; border-radius: 8px; text-decoration: none; color: inherit; margin-bottom: .5rem; }
.nkst-left-profile:hover { background: #f0f2f5; }
.nkst-left-avatar, .nkst-left-avatar-initials { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.nkst-left-avatar-initials { background: var(--nkst-color-primary, #1e3a8a); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; }
.nkst-left-name { font-weight: 700; font-size: .9rem; color: var(--dark-color); }
.nkst-left-role { font-size: .78rem; color: #65676b; }

.nkst-left-nav { display: flex; flex-direction: column; }
.nkst-left-nav-item {
    display: flex; align-items: center; gap: .75rem; padding: .6rem .5rem; border-radius: 8px;
    color: var(--dark-color); text-decoration: none; font-size: .88rem; font-weight: 600;
}
.nkst-left-nav-item i { width: 20px; text-align: center; color: #65676b; }
.nkst-left-nav-item:hover { background: #f0f2f5; }
.nkst-left-nav-item.active { background: #e7f3ff; color: var(--nkst-color-primary, #1e3a8a); }
.nkst-left-nav-item.active i { color: var(--nkst-color-primary, #1e3a8a); }
.nkst-left-nav-item.nkst-left-muted { color: #65676b; font-style: italic; }
.nkst-left-unit-dot { width: 8px; height: 8px; border-radius: 50%; background: #7c3aed; display: inline-block; }

.nkst-left-divider { height: 1px; background: var(--nkst-color-border, #e4e6eb); margin: .6rem 0; }
.nkst-left-section-title { font-size: .78rem; font-weight: 700; color: #65676b; text-transform: uppercase; letter-spacing: .03em; padding: 0 .5rem; margin-bottom: .35rem; }

/* Right column */
.nkst-right-card { background: #fff; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.1); padding: .85rem; }
.nkst-right-card-head { display: flex; align-items: center; justify-content: space-between; font-size: .92rem; font-weight: 700; color: var(--dark-color); margin-bottom: .5rem; }
.nkst-right-card-head a { font-size: .78rem; font-weight: 700; color: var(--nkst-color-primary, #1e3a8a); text-decoration: none; }
.nkst-right-empty { font-size: .82rem; color: #65676b; margin: 0; }

.nkst-right-row { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; text-decoration: none; color: inherit; }
.nkst-right-row-text { flex: 1; min-width: 0; }
.nkst-right-row-title { font-size: .85rem; font-weight: 600; color: var(--dark-color); line-height: 1.3; }
.nkst-right-row-sub { font-size: .76rem; color: #65676b; margin-top: 1px; }
.nkst-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.nkst-right-date-chip {
    flex-shrink: 0; width: 40px; text-align: center; background: #f0f2f5; border-radius: 6px; padding: .2rem 0;
    display: flex; flex-direction: column; line-height: 1.1;
}
.nkst-right-date-chip span { font-size: .95rem; font-weight: 800; color: var(--nkst-color-primary, #1e3a8a); }
.nkst-right-date-chip small { font-size: .6rem; font-weight: 700; text-transform: uppercase; color: #65676b; }

.nkst-right-avatar, .nkst-right-avatar-initials { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.nkst-right-avatar-initials { background: var(--nkst-color-secondary, #f59e0b); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .75rem; }
.nkst-right-avatar-wrap { position: relative; flex-shrink: 0; }
.nkst-online-dot { position: absolute; bottom: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: #31a24c; border: 2px solid #fff; }

/* ═══════════════════════════════════════════════════════════════
   Phase 15: Display modes (Light default / Dark / Compact).

   Scope, deliberately: this covers `body` (background/text, so the
   page never shows a light gap around dark cards) plus every .nkst-*
   component — which is effectively every page built across Phases
   2–14 (Home Feed, Sermons, Watch, Events, Prayer, Ward, Church Unit,
   Notifications, Settings itself). It intentionally does NOT reskin
   admin/*, the legacy chat.php/group-chat.php screens (extensive
   pre-existing inline styles, out of scope to retrofit safely here),
   or the public marketing pages — "do not allow theme changes to
   break existing pages" is satisfied by leaving what dark mode
   doesn't cleanly reach alone, in its always-tested light appearance,
   rather than guessing at a risky full-site reskin.
═══════════════════════════════════════════════════════════════ */
html[data-nkst-theme="dark"] body { background: #18191a; color: #e4e6eb; }
html[data-nkst-theme="dark"] .nkst-card,
html[data-nkst-theme="dark"] .nkst-composer,
html[data-nkst-theme="dark"] .nkst-right-card,
html[data-nkst-theme="dark"] .set-card,
html[data-nkst-theme="dark"] .post-card,
html[data-nkst-theme="dark"] .evc-wrap,
html[data-nkst-theme="dark"] .evd-body, html[data-nkst-theme="dark"] .evd-section,
html[data-nkst-theme="dark"] .wd-identity, html[data-nkst-theme="dark"] .cu-identity {
    background: #242526 !important; color: #e4e6eb !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.4) !important;
}
html[data-nkst-theme="dark"] .nkst-heading-lg, html[data-nkst-theme="dark"] .nkst-heading-md,
html[data-nkst-theme="dark"] h1, html[data-nkst-theme="dark"] h2, html[data-nkst-theme="dark"] h3,
html[data-nkst-theme="dark"] .post-info h3, html[data-nkst-theme="dark"] .nkst-left-name,
html[data-nkst-theme="dark"] .set-toggle-label, html[data-nkst-theme="dark"] .nkst-right-row-title,
html[data-nkst-theme="dark"] .evc-title, html[data-nkst-theme="dark"] .evd-title {
    color: #e4e6eb !important;
}
html[data-nkst-theme="dark"] .nkst-text-muted, html[data-nkst-theme="dark"] .post-info p,
html[data-nkst-theme="dark"] .nkst-right-row-sub, html[data-nkst-theme="dark"] .set-desc,
html[data-nkst-theme="dark"] .evc-meta {
    color: #b0b3b8 !important;
}
html[data-nkst-theme="dark"] .nkst-composer-placeholder, html[data-nkst-theme="dark"] .nkst-textarea,
html[data-nkst-theme="dark"] .nkst-input, html[data-nkst-theme="dark"] .set-field select,
html[data-nkst-theme="dark"] #pryText, html[data-nkst-theme="dark"] #cevDescription {
    background: #3a3b3c !important; color: #e4e6eb !important; border-color: #4e4f50 !important;
}
html[data-nkst-theme="dark"] .nkst-left-nav-item, html[data-nkst-theme="dark"] .set-link-row {
    color: #e4e6eb;
}
html[data-nkst-theme="dark"] .nkst-left-nav-item:hover, html[data-nkst-theme="dark"] .set-tab {
    background: #3a3b3c; color: #e4e6eb;
}
html[data-nkst-theme="dark"] .nkst-left-divider, html[data-nkst-theme="dark"] .set-toggle-row,
html[data-nkst-theme="dark"] .nkst-right-card-head {
    border-color: #3e4042 !important;
}

/* Compact: tighter spacing/typography on the same .nkst-* components — a
   density preference, not a color change, so it layers safely under
   either Light or Dark. */
html[data-nkst-theme="compact"] .nkst-card, html[data-nkst-theme="compact"] .post-card,
html[data-nkst-theme="compact"] .nkst-right-card, html[data-nkst-theme="compact"] .set-card {
    padding: .6rem !important;
}
html[data-nkst-theme="compact"] .post-header { padding: .5rem !important; }
html[data-nkst-theme="compact"] .post-content, html[data-nkst-theme="compact"] .post-preview-meta,
html[data-nkst-theme="compact"] .post-actions {
    padding-top: .35rem !important; padding-bottom: .35rem !important;
}
html[data-nkst-theme="compact"] .nkst-heading-lg { font-size: 1.1rem !important; }
html[data-nkst-theme="compact"] .evc-row, html[data-nkst-theme="compact"] .wch-row,
html[data-nkst-theme="compact"] .ntf-item { padding: .5rem .6rem !important; }