/* =============================================================================
   Meritocrai design system — cream / charcoal / coral
   -----------------------------------------------------------------------------
   One unified theme inspired by editorial Lovable/Intercom aesthetics.
   Warm parchment canvas, charcoal authority, soft coral accents, and
   multi-color atmospheric washes for delight.

   Component vocabulary (m-*) is shared across landing, auth, dashboard,
   settings, admin. Page-scoped rules live under #page-id wrappers.

   Typography: DM Sans 300/400/500/600 + italic 400/500 for emphasis.
               JetBrains Mono for eyebrows, time stamps, code.
   ============================================================================= */


/* =============================================================================
   1. Reset
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }


/* =============================================================================
   2. Tokens
   ============================================================================= */

:root {
    /* Canvas & surfaces */
    --m-bg:            #f7f4ed;   /* cream base */
    --m-surface:       #fcfbf8;   /* offwhite raised cards */
    --m-surface-raise: #fcfbf8;   /* alias kept for back-compat */
    --m-surface-dim:   #efece5;   /* recessed inputs, code blocks */
    --m-charcoal:      #1c1c1c;   /* dark inverted panels */
    --m-charcoal-soft: #2a2a2a;

    /* Text */
    --m-text:        #1c1c1c;
    --m-text-soft:   rgba(28, 28, 28, 0.82);
    --m-text-muted:  #5f5f5d;
    --m-text-quiet:  #a09f9b;
    --m-text-dim:    rgba(28, 28, 28, 0.4);
    --m-text-on-dark: #fcfbf8;
    --m-text-on-dark-soft: rgba(252, 251, 248, 0.78);
    --m-text-on-dark-dim:  rgba(252, 251, 248, 0.45);

    /* Borders */
    --m-border:        #eceae4;
    --m-border-strong: rgba(28, 28, 28, 0.35);
    --m-border-hover:  rgba(28, 28, 28, 0.22);
    --m-border-dark:   rgba(252, 251, 248, 0.10);

    /* Accent — soft coral gradient family */
    --m-accent:        #c4552b;   /* deep coral for links / labels */
    --m-accent-hi:     #d36336;
    --m-accent-soft:   rgba(196, 85, 43, 0.10);
    --m-accent-line:   rgba(196, 85, 43, 0.30);
    --m-coral:         #f4a27a;   /* bright coral for underline accents */
    --m-coral-hi:      #f7c49a;
    /* Brand mark only (logo, favicon, app icons): white "M" on pure red,
       as in Slowio and PPELLM. Not an interface colour. Generated icons:
       mobile_app/scripts/make_brand_assets.py. */
    --m-brand-red:     #ff0000;

    /* Semantic */
    --m-success: #21a056;
    --m-warning: #c47b1b;
    --m-danger:  #b3382f;

    /* Shadows */
    --m-shadow-inset:
        rgba(255, 255, 255, 0.20) 0 0.5px 0 0 inset,
        rgba(0, 0, 0, 0.20)       0 0 0 0.5px inset,
        rgba(0, 0, 0, 0.05)       0 1px 2px 0;
    --m-shadow-card:
        rgba(28, 28, 28, 0.05) 0 1px 0,
        rgba(28, 28, 28, 0.04) 0 4px 12px;
    --m-shadow-lift:
        rgba(28, 28, 28, 0.08) 0 12px 28px;
    --m-shadow-focus:
        rgba(196, 85, 43, 0.20) 0 0 0 3px;

    /* Type */
    --m-font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system,
                   BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    --m-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Radii */
    --m-r-xs:   4px;
    --m-r-sm:   6px;
    --m-r-md:   10px;
    --m-r-lg:   14px;
    --m-r-xl:   18px;
    --m-r-2xl:  22px;
    --m-r-pill: 9999px;
}


/* =============================================================================
   3. Base
   ============================================================================= */

html, body {
    margin: 0;
    padding: 0;
    background: var(--m-bg);
    color: var(--m-text);
    font-family: var(--m-font-sans);
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "ss02", "kern", "liga";
}

#app-theme {
    background: var(--m-bg);
    color: var(--m-text);
    min-height: 100vh;
}

::selection {
    background: rgba(244, 162, 122, 0.35);
    color: var(--m-text);
}


/* =============================================================================
   4. Layout primitives
   ============================================================================= */

.m-container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.m-container-narrow {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
}

.m-section    { padding: 96px 0; position: relative; }
.m-section-sm { padding: 64px 0; }
.m-section-lg { padding: 128px 0; }

@media (max-width: 768px) {
    .m-section    { padding: 64px 0; }
    .m-section-sm { padding: 40px 0; }
    .m-section-lg { padding: 80px 0; }
}

.m-divider {
    border: 0;
    border-top: 1px solid var(--m-border);
    margin: 0;
}


/* =============================================================================
   5. Atmospheric washes — the signature multi-color glow
   ============================================================================= */

.m-glow,
.m-glow-soft,
.m-glow-cta {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

/* Hero wash — peach + amber + lilac + rose */
.m-glow {
    inset: -80px;
    background:
        radial-gradient(ellipse 700px 400px at 20% 30%,
                        rgba(255, 180, 160, 0.30) 0%, transparent 70%),
        radial-gradient(ellipse 600px 350px at 80% 20%,
                        rgba(255, 210, 140, 0.22) 0%, transparent 65%),
        radial-gradient(ellipse 500px 300px at 60% 80%,
                        rgba(180, 195, 255, 0.18) 0%, transparent 65%),
        radial-gradient(ellipse 400px 250px at 10% 85%,
                        rgba(255, 160, 200, 0.15) 0%, transparent 60%);
}

/* Softer wash — for inline panels / dashboard hero */
.m-glow-soft {
    inset: -40px;
    background:
        radial-gradient(ellipse 500px 280px at 15% 30%,
                        rgba(255, 190, 165, 0.18) 0%, transparent 70%),
        radial-gradient(ellipse 420px 240px at 85% 50%,
                        rgba(180, 195, 255, 0.12) 0%, transparent 65%);
}

/* CTA wash — centered glow */
.m-glow-cta {
    inset: -60px;
    background:
        radial-gradient(ellipse 600px 300px at 50% 50%,
                        rgba(255, 180, 160, 0.22) 0%, transparent 65%),
        radial-gradient(ellipse 400px 200px at 20% 70%,
                        rgba(255, 210, 140, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse 350px 200px at 80% 30%,
                        rgba(180, 195, 255, 0.13) 0%, transparent 60%);
}


/* =============================================================================
   6. Typography
   ============================================================================= */

.m-eyebrow {
    display: inline-block;
    font-family: var(--m-font-sans);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: var(--m-text-muted);
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-pill);
    padding: 4px 14px;
    margin-bottom: 28px;
    background: rgba(252, 251, 248, 0.7);
}

.m-eyebrow-mono {
    font-family: var(--m-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--m-text-muted);
    border: 0;
    background: transparent;
    padding: 0;
    margin-bottom: 14px;
}

.m-eyebrow-accent { color: var(--m-accent); border-color: var(--m-accent-line); }

.m-h1 {
    font-size: clamp(40px, 6vw, 64px);
    line-height: 1.05;
    letter-spacing: -1.6px;
    font-weight: 600;
    color: var(--m-text);
    margin: 0 0 24px;
}

.m-h2 {
    font-size: clamp(30px, 4.2vw, 48px);
    line-height: 1.06;
    letter-spacing: -1.2px;
    font-weight: 600;
    color: var(--m-text);
    margin: 0 0 20px;
}

.m-h3 {
    font-size: clamp(22px, 2.6vw, 28px);
    line-height: 1.18;
    letter-spacing: -0.5px;
    font-weight: 600;
    color: var(--m-text);
    margin: 0 0 14px;
}

.m-h4 {
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: -0.2px;
    font-weight: 600;
    color: var(--m-text);
    margin: 0 0 8px;
}

/* Italic emphasis with soft coral underline (the signature touch) */
.m-h1 em, .m-h2 em, .m-em-coral {
    font-style: italic;
    font-weight: 500;
    position: relative;
    display: inline-block;
}

.m-h1 em::after, .m-h2 em::after, .m-em-coral::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 3px;
    border-radius: var(--m-r-pill);
    background: linear-gradient(90deg, var(--m-coral), var(--m-coral-hi));
    opacity: 0.75;
}

.m-subtitle {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 400;
    color: var(--m-text-muted);
    margin: 0 0 32px;
    max-width: 580px;
}

.m-body {
    font-size: 16px;
    line-height: 1.65;
    color: var(--m-text-soft);
}

.m-muted { color: var(--m-text-muted); }
.m-dim   { color: var(--m-text-dim); }
.m-quiet { color: var(--m-text-quiet); }

.m-mono {
    font-family: var(--m-font-mono);
    font-size: 0.9em;
    letter-spacing: 0.2px;
}

.m-accent-text { color: var(--m-accent); }


/* =============================================================================
   7. Buttons — pill / rounded variants
   ============================================================================= */

.m-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    font-family: var(--m-font-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    border-radius: var(--m-r-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none !important;
    transition: opacity 0.15s, background 0.15s, border-color 0.15s,
                transform 0.15s, color 0.15s;
    user-select: none;
    white-space: nowrap;
}

.m-btn:focus-visible { outline: none; box-shadow: var(--m-shadow-focus); }

.m-btn-sm { padding: 7px 14px; font-size: 13px; }
.m-btn-lg { padding: 12px 22px; font-size: 15px; border-radius: var(--m-r-md); }
.m-btn-block { width: 100%; }

/* Primary — charcoal inset, the workhorse */
.m-btn-primary {
    background: var(--m-charcoal);
    color: var(--m-text-on-dark);
    border-color: var(--m-charcoal);
    box-shadow: var(--m-shadow-inset);
}
.m-btn-primary:hover  { opacity: 0.86; color: var(--m-text-on-dark); }
.m-btn-primary:active { opacity: 0.78; transform: translateY(0.5px); }

/* Accent — warm coral fill */
.m-btn-accent {
    background: var(--m-accent) !important;
    color: #fff !important;
    border-color: var(--m-accent) !important;
    box-shadow: var(--m-shadow-inset);
}
.m-btn-accent:hover  { background: var(--m-accent-hi) !important; color: #fff !important; }
.m-btn-accent:active { opacity: 0.92; }

/* Ghost — outlined charcoal */
.m-btn-ghost {
    background: transparent;
    color: var(--m-text);
    border: 1px solid var(--m-border-strong);
}
.m-btn-ghost:hover {
    background: var(--m-surface);
    color: var(--m-text);
    border-color: var(--m-text);
}

/* Subtle — link-style */
.m-btn-subtle {
    background: transparent;
    color: var(--m-text-soft);
    border-color: transparent;
}
.m-btn-subtle:hover { color: var(--m-text); background: var(--m-surface); }

/* Pill — rounded fully */
.m-btn-pill { border-radius: var(--m-r-pill); }

/* Danger — outlined red */
.m-btn-danger {
    background: transparent;
    color: var(--m-danger);
    border: 1px solid var(--m-danger);
}
.m-btn-danger:hover { background: var(--m-danger); color: #fff; }


/* =============================================================================
   8. Cards & panels
   ============================================================================= */

.m-card {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-lg);
    padding: 24px;
    box-shadow: var(--m-shadow-card);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.m-card-hover:hover { border-color: var(--m-border-hover); }

.m-card-compact { padding: 16px; }
.m-card-lg      { padding: 32px; }

/* Panel — large rounded card, used for ask-box / settings panels */
.m-panel {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-2xl);
    padding: 22px 26px;
    box-shadow: var(--m-shadow-card);
}

.m-panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.m-panel-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--m-text);
}
.m-panel-label-sub {
    font-weight: 400;
    color: var(--m-text-muted);
    margin-left: 8px;
}

/* Charcoal panel — inverted, used for "definitive answer" surfaces */
.m-card-dark {
    background: var(--m-charcoal);
    color: var(--m-text-on-dark);
    border-radius: var(--m-r-2xl);
    padding: 28px 32px;
    box-shadow: var(--m-shadow-lift);
    border: 1px solid var(--m-charcoal);
}

.m-card-dark .m-card-tag {
    font-family: var(--m-font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--m-text-on-dark-dim);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-bottom: 14px;
    display: block;
}

.m-card-dark h2, .m-card-dark h3 {
    color: var(--m-text-on-dark);
    font-weight: 500;
    letter-spacing: -0.4px;
    margin: 0 0 14px;
}

.m-card-dark p { color: var(--m-text-on-dark-soft); margin: 0 0 12px; line-height: 1.65; }
.m-card-dark p:last-child { margin-bottom: 0; }

.m-card-dark a { color: var(--m-coral) !important; }


/* =============================================================================
   9. Forms — inputs, selects, textareas
   ============================================================================= */

.form-control,
.form-select,
input.form-control,
select.form-select,
textarea.form-control {
    background: var(--m-surface) !important;
    color: var(--m-text) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-r-md) !important;
    padding: 10px 14px !important;
    font-family: var(--m-font-sans) !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* The `background` shorthand above (with !important) also wiped Bootstrap's
   chevron, so every native select showed as a plain box. Put it back. */
select.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235f5f5d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 12px !important;
    padding-right: 38px !important;
}

input.form-control:focus,
select.form-select:focus,
textarea.form-control:focus {
    border-color: var(--m-accent) !important;
    box-shadow: var(--m-shadow-focus) !important;
    outline: none !important;
}

input.form-control::placeholder,
textarea.form-control::placeholder { color: var(--m-text-dim); }

label.form-label,
.form-label {
    color: var(--m-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
    letter-spacing: 0 !important;
}

/* Checkbox / Radio — Bootstrap's default uses float + margin-top math to
   align the input with the first text line, which drifts when the input
   visual weight is heavier than default. Flex-center input + label so the
   square always sits on the label's optical centre. */
.form-check {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding-left: 0 !important;
    min-height: 0 !important;
}
.form-check-input {
    background-color: var(--m-surface) !important;
    border: 1px solid var(--m-border-strong) !important;
    float: none !important;
    margin: 0 !important;
    flex-shrink: 0;
}
.form-check-input:checked {
    background-color: var(--m-accent) !important;
    border-color: var(--m-accent) !important;
}
.form-check-input:focus {
    box-shadow: var(--m-shadow-focus) !important;
}
.form-check-label {
    color: var(--m-text-soft) !important;
    font-size: 15px !important;
    line-height: 1.4;
    margin: 0 !important;
}

/* Password-toggle input button group */
.password-toggle-btn {
    background: var(--m-surface) !important;
    color: var(--m-text-muted) !important;
    border: 1px solid var(--m-border) !important;
    border-left: 0 !important;
    border-radius: 0 var(--m-r-md) var(--m-r-md) 0 !important;
}
.password-toggle-btn:hover {
    color: var(--m-text) !important;
    background: var(--m-surface-dim) !important;
}

/* Textarea */
textarea.form-control { line-height: 1.5 !important; }


/* =============================================================================
   10. Badges, pills, status chips
   ============================================================================= */

.m-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--m-r-pill);
    background: var(--m-surface);
    color: var(--m-text-soft);
    border: 1px solid var(--m-border);
    letter-spacing: 0.1px;
    line-height: 1.2;
}

.m-badge-accent {
    background: var(--m-accent-soft);
    color: var(--m-accent);
    border-color: var(--m-accent-line);
}
.m-badge-success {
    background: rgba(33, 160, 86, 0.10);
    color: var(--m-success);
    border-color: rgba(33, 160, 86, 0.30);
}
.m-badge-warning {
    background: rgba(196, 123, 27, 0.10);
    color: var(--m-warning);
    border-color: rgba(196, 123, 27, 0.30);
}
.m-badge-danger {
    background: rgba(179, 56, 47, 0.08);
    color: var(--m-danger);
    border-color: rgba(179, 56, 47, 0.30);
}

/* Status pill (with live dot) */
.m-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    background: var(--m-surface);
    color: var(--m-text-soft);
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-pill);
    line-height: 1;
    white-space: nowrap;
}

.m-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--m-success);
    animation: m-live 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes m-live { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Avatar */
.m-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--m-charcoal);
    color: var(--m-text-on-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
    line-height: 1;
}


/* =============================================================================
   11. Navbar — the sticky cream bar with pill tabs + status + avatar
   ============================================================================= */

.navbar.navbar-light, .navbar.navbar-dark, .navbar {
    background: var(--m-bg) !important;
    border-bottom: 1px solid var(--m-border);
    padding: 0 !important;
    min-height: 64px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar .container-fluid,
.navbar .container {
    max-width: 1160px;
    padding: 0 24px;
    min-height: 64px;
}

.navbar-brand,
.m-nav-brand {
    color: var(--m-text) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    letter-spacing: -0.3px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.navbar-brand:hover,
.m-nav-brand:hover { color: var(--m-text) !important; opacity: 0.85; }

.m-nav-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--m-brand-red);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1;
}

/* Pill-tab nav (authenticated nav center) */
.m-nav-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-pill);
    padding: 4px;
    list-style: none;
    margin: 0;
}
.m-nav-tab {
    font-size: 13px;
    font-weight: 500;
    color: var(--m-text-muted);
    text-decoration: none;
    padding: 7px 16px;
    border-radius: var(--m-r-pill);
    transition: background 0.15s, color 0.15s;
    line-height: 1;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}
.m-nav-tab:hover { color: var(--m-text); }
.m-nav-tab.active,
.m-nav-tab.is-active {
    background: var(--m-charcoal);
    color: var(--m-text-on-dark);
}
.m-nav-tab.admin-nav-link { color: var(--m-accent); }
.m-nav-tab.admin-nav-link.active { background: var(--m-accent); color: #fff; }

/* Right cluster */
.m-nav-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Hamburger toggler — custom icon (cream theme only, charcoal lines) */
.navbar-toggler {
    border: 1px solid var(--m-border-strong) !important;
    padding: 6px 10px !important;
    border-radius: var(--m-r-md) !important;
}
.navbar-toggler:focus { box-shadow: var(--m-shadow-focus) !important; }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(28,28,28,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* Bootstrap NavLink (used by simple navbar) — restyle to look like soft links */
.navbar-nav .nav-link {
    color: var(--m-text-muted) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 8px 14px !important;
    transition: color 0.15s;
}
.navbar-nav .nav-link:hover  { color: var(--m-text) !important; }
.navbar-nav .nav-link.active { color: var(--m-text) !important; }

.navbar-simple .navbar-nav {
    flex-direction: row !important;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Nav inner layout — three zones (logo / center pills / right cluster) */
.m-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
    flex-wrap: wrap;
}

.m-nav-center {
    flex: 1;
    justify-content: center;
}

.m-nav-right-wrap {
    align-items: center;
}

/* Public navbar right cluster wraps gracefully on narrow screens */
.navbar-simple .m-nav-right {
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
}

@media (max-width: 480px) {
    .navbar-simple .m-nav-inner {
        gap: 8px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-simple .m-btn-sm { padding: 6px 12px; }
}

.m-nav-avatar-link { line-height: 1; }
.m-nav-avatar-link:hover .m-avatar { opacity: 0.88; }

/* Mobile collapse list — stack vertically with comfortable spacing */
.m-nav-mobile-list {
    flex-direction: column !important;
    gap: 4px;
    padding: 12px 0 8px;
    border-top: 1px solid var(--m-border);
    margin-top: 12px;
}
.m-nav-mobile-list .nav-link {
    padding: 10px 4px !important;
}

/* Bootstrap's .navbar-expand-lg .navbar-collapse forces display:flex !important
   at >=992px, which overrides the d-lg-none utility on the mobile collapse.
   Re-hide the mobile-only collapse + toggler at the lg breakpoint. */
@media (min-width: 992px) {
    .navbar .navbar-collapse.d-lg-none,
    .navbar .navbar-toggler.d-lg-none {
        display: none !important;
    }
}

/* =============================================================================
   Verification popover (per-card dot + modal confidence badge)
   ============================================================================= */

/* Click target around the 8px dot — wider hit area without enlarging the dot */
.m-verif-dot-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    margin: -6px 4px -6px 0;
    border-radius: 4px;
    cursor: help;
}
.m-verif-dot-wrap:hover,
.m-verif-dot-wrap:focus {
    background: var(--m-surface);
    outline: none;
}
.m-verif-dot-wrap:focus-visible {
    box-shadow: 0 0 0 2px var(--m-border-strong);
}

/* Clickable confidence badge (modal) — adds a subtle affordance */
.m-verif-badge-clickable {
    cursor: pointer;
    user-select: none;
    transition: opacity 0.15s, transform 0.15s;
}
.m-verif-badge-clickable:hover { opacity: 0.85; }
.m-verif-badge-clickable:active { transform: translateY(1px); }
.m-verif-info-icon {
    margin-left: 6px;
    font-size: 11px;
    opacity: 0.75;
}

/* Popover shell — Bootstrap caps popover width at 276px, lift it for our
   richer content. dbc.Popover wraps the body in .popover; .m-verif-popover-shell
   is applied to the same root. */
.m-verif-popover-shell.popover,
.popover.m-verif-popover-shell {
    max-width: 360px !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-r-md) !important;
    background: var(--m-bg) !important;
    box-shadow: 0 6px 24px rgba(28, 28, 28, 0.10);
}
.m-verif-popover-shell .popover-body {
    padding: 12px 14px;
    color: var(--m-text);
}
.m-verif-popover-shell .popover-arrow::after,
.m-verif-popover-shell .popover-arrow::before {
    border-color: transparent !important;
}

/* Popover content layout */
.m-verif-popover {
    min-width: 240px;
    font-size: 12.5px;
    line-height: 1.5;
}
.m-popover-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--m-border);
}
.m-popover-row:last-child { border-bottom: 0; }
.m-popover-row-stack {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}
.m-popover-name {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--m-text-muted);
    flex-shrink: 0;
}
.m-popover-row-gauge .m-popover-name { min-width: 78px; text-transform: none; }
.m-popover-value { font-size: 12.5px; color: var(--m-text); }
.m-popover-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.m-popover-flags { display: flex; flex-direction: column; gap: 8px; }
.m-popover-flag-row { display: flex; flex-direction: column; gap: 2px; }
.m-popover-flag-def {
    font-size: 11px;
    color: var(--m-text-muted);
    line-height: 1.45;
    padding-left: 2px;
}
.m-popover-notes {
    font-size: 11.5px;
    color: var(--m-text-muted);
    margin: 0;
    padding-top: 6px;
    border-top: 1px solid var(--m-border);
    line-height: 1.5;
}

/* Gauge bar */
.m-gauge-track {
    flex: 1;
    height: 6px;
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}
.m-gauge-fill { height: 100%; transition: width 0.2s ease-out; }
.m-gauge-success { background: #22c55e; }
.m-gauge-warning { background: #f59e0b; }
.m-gauge-danger  { background: #ef4444; }

/* Subtle badge variant used for model chips inside the popover */
.m-badge.m-badge-subtle {
    background: var(--m-surface);
    color: var(--m-text-muted);
    border-color: var(--m-border);
    font-weight: 400;
}

/* Card top row uses small chips (matched to the existing "filtered"
   badge) — keeps the meta line dense and quiet. The modal-side badge
   stays full size since it's the primary verification affordance there. */
.alth3-item-top .m-badge {
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.4;
}
.alth3-item-top .m-verif-info-icon {
    font-size: 9px;
    margin-left: 3px;
}


/* =============================================================================
   12. Landing — hero, features, steps, stats, CTA
   ============================================================================= */

#landing-page { background: var(--m-bg); min-height: 100vh; }

/* HERO — centered editorial layout with atmospheric wash */
.m-hero {
    position: relative;
    padding: 96px 0 88px;
    text-align: center;
    overflow: hidden;
}
.m-hero .m-container { position: relative; z-index: 1; }

.m-hero-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 400;
    color: var(--m-text-muted);
    letter-spacing: 0.03em;
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-pill);
    padding: 4px 14px;
    margin-bottom: 28px;
    background: rgba(252, 251, 248, 0.7);
}

.m-hero-title {
    font-size: clamp(38px, 6vw, 60px);
    line-height: 1.05;
    letter-spacing: -1.5px;
    font-weight: 600;
    color: var(--m-text);
    max-width: 820px;
    margin: 0 auto 22px;
}

.m-hero-sub {
    font-size: 18px;
    line-height: 1.55;
    color: var(--m-text-muted);
    max-width: 560px;
    margin: 0 auto 40px;
}

.m-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

/* Hero diagram — 4-step strip */
.m-hero-diagram {
    margin: 56px auto 0;
    max-width: 720px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-lg);
    overflow: hidden;
    background: var(--m-surface);
}
.m-hero-diagram-step {
    background: var(--m-surface);
    padding: 20px 14px;
    text-align: center;
    position: relative;
}
.m-hero-diagram-step + .m-hero-diagram-step { border-left: 1px solid var(--m-border); }
.m-hero-diagram-step:last-child { background: var(--m-charcoal); }
.m-hero-diagram-step:last-child .m-hd-num   { color: var(--m-text-on-dark-dim); }
.m-hero-diagram-step:last-child .m-hd-label { color: var(--m-text-on-dark); }
.m-hd-icon  { font-size: 20px; display: block; margin-bottom: 8px; color: var(--m-text); }
.m-hero-diagram-step:last-child .m-hd-icon { color: var(--m-coral); }
.m-hd-num   { font-family: var(--m-font-mono); font-size: 11px; color: var(--m-text-muted); margin-bottom: 4px; }
.m-hd-label { font-size: 13px; font-weight: 600; color: var(--m-text); letter-spacing: -0.2px; }

/* Section head */
.m-section-head {
    margin-bottom: 56px;
    max-width: 640px;
}
.m-section-head-center { margin-left: auto; margin-right: auto; text-align: center; }

/* CONTRAST cards — "before / after" pair */
.m-contrast-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.m-contrast {
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-lg);
    padding: 32px;
    background: var(--m-surface);
}
.m-contrast.is-bad   { background: rgba(28, 28, 28, 0.03); }
.m-contrast.is-good  { border-color: rgba(244, 162, 122, 0.40); }

.m-contrast-label {
    font-family: var(--m-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.m-contrast.is-bad  .m-contrast-label { color: var(--m-text-muted); }
.m-contrast.is-good .m-contrast-label { color: #b96b3a; }

.m-contrast h3 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.4px;
    margin-bottom: 18px;
    color: var(--m-text);
}
.m-contrast-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.m-contrast-list li {
    font-size: 15px;
    color: var(--m-text-muted);
    padding-left: 22px;
    position: relative;
    line-height: 1.5;
}
.m-contrast-list li::before {
    content: attr(data-icon);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 13px;
    color: var(--m-text-muted);
}
.m-contrast.is-good .m-contrast-list li::before { color: var(--m-accent); }

/* STEPS — 4-step grid with last accent */
.m-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-lg);
    overflow: hidden;
    background: var(--m-surface);
}
.m-step-card {
    background: var(--m-surface);
    padding: 28px 22px;
}
.m-step-card + .m-step-card { border-left: 1px solid var(--m-border); }
.m-step-card:last-child {
    background: linear-gradient(135deg,
                                rgba(244, 162, 122, 0.12) 0%,
                                rgba(247, 196, 154, 0.12) 100%);
}
.m-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--m-r-pill);
    background: var(--m-charcoal);
    color: var(--m-text-on-dark);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 16px;
}
.m-step-card:last-child .m-step-num {
    background: linear-gradient(135deg, #f4a27a, #e8885a);
}
.m-step-card h4 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--m-text);
    margin: 0 0 8px;
}
.m-step-card p {
    font-size: 14px;
    color: var(--m-text-muted);
    line-height: 1.55;
    margin: 0;
}

/* FEATURE grid — 3-up cards */
.m-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.m-feature {
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-lg);
    padding: 28px 24px;
    background: var(--m-surface);
    transition: border-color 0.2s;
}
.m-feature:hover { border-color: var(--m-border-hover); }

.m-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--m-r-pill);
    border: 1px solid var(--m-border);
    background: var(--m-bg);
    font-size: 18px;
    color: var(--m-text);
    margin-bottom: 16px;
}
.m-feature h3 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--m-text);
    margin: 0 0 8px;
}
.m-feature p {
    font-size: 14px;
    color: var(--m-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* STATS row */
.m-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 24px;
}
.m-stat-num {
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 600;
    letter-spacing: -1.2px;
    line-height: 1;
    color: var(--m-text);
    margin-bottom: 10px;
}
.m-stat-label {
    font-family: var(--m-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--m-text-muted);
    margin-bottom: 8px;
    font-weight: 500;
}
.m-stat-desc {
    font-size: 14px;
    color: var(--m-text-muted);
    line-height: 1.5;
    margin: 0;
    max-width: 220px;
}

/* CTA block — atmospheric wash, centered */
.m-cta-section {
    padding: 96px 0 128px;
    border-top: 1px solid var(--m-border);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.m-cta-section .m-container { position: relative; z-index: 1; }

.m-cta-section h2 {
    font-size: clamp(30px, 4.5vw, 48px);
    font-weight: 600;
    line-height: 1.07;
    letter-spacing: -1.3px;
    color: var(--m-text);
    max-width: 640px;
    margin: 0 auto 18px;
}
.m-cta-sub {
    font-size: 17px;
    color: var(--m-text-muted);
    margin: 0 auto 32px;
    max-width: 460px;
}
.m-cta-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}
.m-cta-or  { color: var(--m-text-muted); font-size: 14px; }
.m-cta-note { margin-top: 18px; font-size: 13px; color: var(--m-text-dim); }


/* =============================================================================
   13. Footer
   ============================================================================= */

.m-footer {
    border-top: 1px solid var(--m-border);
    padding: 32px 0 24px;
    color: var(--m-text-muted);
    font-size: 13px;
    line-height: 1.6;
    background: var(--m-bg);
}

.m-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.m-footer a {
    color: var(--m-text-muted);
    text-decoration: none;
    margin-left: 18px;
}
.m-footer a:hover { color: var(--m-text); }


/* =============================================================================
   14. Auth — login / signup / reset / etc.
   ============================================================================= */

.m-auth-wrap {
    background: var(--m-bg);
    min-height: calc(100vh - 64px);
    padding: 56px 0 80px;
    position: relative;
    overflow: hidden;
}

.m-auth-wrap::before {
    content: '';
    position: absolute;
    top: -120px; left: -80px; right: -80px;
    height: 460px;
    background:
        radial-gradient(ellipse 600px 300px at 30% 30%,
                        rgba(255, 180, 160, 0.20) 0%, transparent 65%),
        radial-gradient(ellipse 500px 280px at 75% 40%,
                        rgba(180, 195, 255, 0.14) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.m-auth-wrap > * { position: relative; z-index: 1; }

.m-auth-card {
    max-width: 460px;
    margin: 0 auto;
    padding: 38px 36px 32px;
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-2xl);
    box-shadow: var(--m-shadow-lift);
}

.m-auth-title {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.6px;
    text-align: center;
    color: var(--m-text);
    margin: 0 0 6px;
}

.m-auth-sub {
    text-align: center;
    color: var(--m-text-muted);
    font-size: 14px;
    margin: 0 0 28px;
    line-height: 1.55;
}

/* dbc.Tabs styling — scoped to known tab containers only.
   (Dash CSS is global; bare .nav-tabs would leak into 3rd-party widgets.) */
.m-auth-card .nav-tabs,
#admin-monitor-page .nav-tabs {
    border-bottom: 1px solid var(--m-border);
    margin-bottom: 24px;
    gap: 4px;
}
.m-auth-card .nav-tabs .nav-link,
#admin-monitor-page .nav-tabs .nav-link {
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    color: var(--m-text-muted) !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
    border-radius: 0 !important;
    margin-bottom: -1px;
}
.m-auth-card .nav-tabs .nav-link:hover,
#admin-monitor-page .nav-tabs .nav-link:hover {
    color: var(--m-text) !important;
}
.m-auth-card .nav-tabs .nav-link.active,
#admin-monitor-page .nav-tabs .nav-link.active {
    color: var(--m-text) !important;
    border-bottom-color: var(--m-accent) !important;
    background: transparent !important;
}

/* Password requirement panel */
.password-requirements {
    margin: 4px 0 18px;
    padding: 14px 16px;
    background: var(--m-surface-dim);
    border-radius: var(--m-r-md);
    border: 1px solid var(--m-border);
}
.password-requirements small {
    color: var(--m-text-muted) !important;
    font-weight: 500;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-family: var(--m-font-mono);
}

.m-pwd-req-row {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.5;
}
.m-pwd-req-row-ok { color: var(--m-success); }
.m-pwd-req-row-ok .m-pwd-req-text { color: var(--m-success); }
.m-pwd-req-dot {
    font-size: 6px;
    color: var(--m-text-muted);
}
.m-pwd-req-icon-ok {
    font-size: 10px;
    color: var(--m-success);
}
.m-pwd-req-text { font-size: 13px; }


/* =============================================================================
   15. Account page
   ============================================================================= */

#account-page {
    background: var(--m-bg);
    padding: 48px 0 72px;
}

#account-page .m-container-narrow > * { position: relative; z-index: 1; }


/* =============================================================================
   16. Dashboard — cream-themed, hero greeting + stat-stack + ask + feed
   ============================================================================= */

#dashboard-page {
    background: var(--m-bg);
    min-height: calc(100vh - 64px);
    padding: 32px 0 80px;
}

.alth3-container,
.m-dashboard-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Wrapper that contains the glow + grid; needs relative positioning */
.m-dash-hero-wrap {
    position: relative;
    overflow: visible;
}


/* Dashboard hero — stats line, then greeting with the options button */
.m-dash-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    position: relative;
}

.m-dash-hero h1 {
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 500;
    letter-spacing: -1.2px;
    line-height: 1.05;
    color: var(--m-text);
    margin: 0;
}

/* One quiet line of numbers above the greeting (was three stacked boxes). */
#dashboard-page .m-dash-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-bottom: 12px;
    position: relative;
    font-family: var(--m-font-mono);
    font-size: 12px;
    color: var(--m-text-muted);
}
#dashboard-page .m-dash-stat-num {
    color: var(--m-text);
    font-weight: 500;
}

/* Small round button beside the greeting that opens the feed options. */
#dashboard-page .m-dash-options-btn {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--m-surface);
    color: var(--m-text);
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-pill);
    box-shadow: var(--m-shadow-card);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
#dashboard-page .m-dash-options-btn:hover { border-color: var(--m-border-hover); }
#dashboard-page .m-dash-options-btn:focus-visible { outline: none; box-shadow: var(--m-shadow-focus); }
#dashboard-page .m-dash-options-icon {
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h4M12 17h8'/%3E%3Ccircle cx='16' cy='7' r='2'/%3E%3Ccircle cx='10' cy='17' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h4M12 17h8'/%3E%3Ccircle cx='16' cy='7' r='2'/%3E%3Ccircle cx='10' cy='17' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* A filter is narrowing the list: say so on the button, since the filters
   themselves are hidden in the modal. */
#dashboard-page .m-dash-options-btn.is-active::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--m-accent);
    box-shadow: 0 0 0 2px var(--m-surface);
}

/* Feed options modal */
.m-feed-modal .modal-content {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-xl);
    box-shadow: var(--m-shadow-lift);
}
.m-feed-modal .modal-header { border-bottom: 1px solid var(--m-border); }
.m-feed-modal .modal-title { font-size: 18px; font-weight: 600; letter-spacing: -0.3px; }
.m-feed-modal .m-feed-status {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}
.m-feed-modal .m-feed-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.m-feed-modal .m-feed-hint {
    display: block;
    margin-top: 8px;
    color: var(--m-text-muted);
    font-size: 12px;
    line-height: 1.5;
}
.m-feed-modal .m-feed-label { margin: 22px 0 8px; }
.m-feed-modal .m-feed-settings-link {
    display: inline-block;
    margin-top: 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--m-text);
    text-decoration: underline;
}

/* Warnings that change what the list means (trust level relaxed, topics
   still being researched). Empty most of the time. */
#dashboard-page .m-dash-notice:not(:empty) { margin-bottom: 14px; }

/* Intro text, moved under the list so the first screen is news. */
#dashboard-page .m-dash-about {
    max-width: 560px;
    margin: 32px auto 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: var(--m-text-muted);
}

.alth3-refresh-btn {
    background: var(--m-charcoal);
    color: var(--m-text-on-dark);
    border: 1px solid var(--m-charcoal);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--m-r-pill);
    cursor: pointer;
    font-family: var(--m-font-sans);
    transition: opacity 0.15s;
    box-shadow: var(--m-shadow-inset);
}
.alth3-refresh-btn:hover  { opacity: 0.86; }
.alth3-refresh-btn:active { opacity: 0.78; }

/* Secondary "Force refresh" variant — same shape, lighter visual weight */
.alth3-refresh-btn-ghost {
    background: transparent;
    color: var(--m-text-muted);
    border: 1px solid var(--m-border);
    box-shadow: none;
}
.alth3-refresh-btn-ghost:hover {
    background: var(--m-surface);
    color: var(--m-text);
    opacity: 1;
}

.alth3-last-refresh {
    color: var(--m-text-muted);
    font-size: 12px;
    font-family: var(--m-font-mono);
}

/* List */
.alth3-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

/* Article list item */
.alth3-item {
    display: flex;
    gap: 14px;
    align-items: stretch;
    padding: 14px 16px;
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-lg);
    box-shadow: var(--m-shadow-card);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.alth3-item-clickable { cursor: pointer; }
.alth3-item-clickable:hover {
    border-color: var(--m-border-hover);
    box-shadow: var(--m-shadow-lift);
}

.alth3-thumb {
    width: 104px;
    height: 80px;
    border-radius: var(--m-r-md);
    overflow: hidden;
    flex-shrink: 0;
    background:
        linear-gradient(135deg,
                        rgba(244, 162, 122, 0.16) 0%,
                        rgba(180, 195, 255, 0.16) 100%);
    border: 1px solid var(--m-border);
    position: relative;
}
.alth3-thumb picture { display: block; width: 100%; height: 100%; }
.alth3-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.alth3-item-content { flex: 1; min-width: 0; }

.alth3-item-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--m-text-muted);
    flex-wrap: wrap;
}
.alth3-cat {
    font-family: var(--m-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    color: var(--m-accent);
    font-size: 11px;
}
.alth3-time {
    color: var(--m-text-muted);
    font-size: 12px;
    font-family: var(--m-font-mono);
}

.alth3-item-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--m-text);
    margin: 0 0 4px;
    letter-spacing: -0.1px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.alth3-item-text {
    font-size: 14px;
    color: var(--m-text-muted);
    line-height: 1.5;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.alth3-item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 2px;
    font-size: 12px;
    color: var(--m-text-muted);
}
.alth3-source { color: var(--m-text-muted); letter-spacing: 0.05px; }

.alth3-item-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.alth3-vote-btn {
    background: transparent;
    color: var(--m-text-dim);
    border: 1px solid var(--m-border);
    width: 32px;
    height: 28px;
    border-radius: var(--m-r-sm);
    cursor: pointer;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    padding: 0;
}
.alth3-vote-btn:hover {
    color: var(--m-text);
    border-color: var(--m-border-hover);
    background: var(--m-surface-dim);
}
.alth3-vote-btn.alth3-vote-btn-up,
.alth3-vote-btn.active-up {
    color: var(--m-success);
    border-color: var(--m-success);
    background: rgba(33, 160, 86, 0.08);
}
.alth3-vote-btn.alth3-vote-btn-down,
.alth3-vote-btn.active-down {
    color: var(--m-danger);
    border-color: var(--m-danger);
    background: rgba(179, 56, 47, 0.06);
}

/* ---- Mark as read -------------------------------------------------------
   Icon-only control in the card's top-right corner. The glyphs are TEXT
   (U+2713 / U+21BA), not an icon font: this app loads only the Bootstrap
   stylesheet, so an `<i class="fas fa-*">` would render as empty space. The
   accessible name lives in a .m-visually-hidden span inside the button. */
.alth3-mark-btn {
    background: transparent;
    color: var(--m-text-dim);
    border: 1px solid transparent;
    width: 32px;
    height: 28px;
    border-radius: var(--m-r-sm);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s;
}
.alth3-item:hover .alth3-mark-btn,
.alth3-mark-btn:focus-visible {
    opacity: 1;
    border-color: var(--m-border);
}
/* Scoped under .alth3-item to MATCH the reveal rule's (0,3,0) — hovering the
   button necessarily hovers the item, so a bare `.alth3-mark-btn:hover` at
   (0,2,0) would lose the border colour it sets. Equal specificity means this
   wins on source order, so it must stay BELOW the reveal rule: do not move it
   up, and do not append another `.alth3-item:hover` rule after it. */
.alth3-item .alth3-mark-btn:hover {
    opacity: 1;
    color: var(--m-success);
    border-color: var(--m-success);
    background: rgba(33, 160, 86, 0.08);
}
/* Touch devices have no hover state at all, so the reveal-on-hover rule above
   would leave the control permanently invisible on iPhone/iPad. */
@media (hover: none) {
    .alth3-mark-btn {
        opacity: 1;
        border-color: var(--m-border);
    }
}
/* The undo control is the only affordance on an already-read card, so it is
   never hidden — on any pointer type. */
.alth3-mark-btn-undo {
    opacity: 1;
    border-color: var(--m-border);
    font-size: 14px;
}
.alth3-item .alth3-mark-btn-undo:hover {
    color: var(--m-accent);
    border-color: var(--m-accent);
    background: var(--m-accent-soft);
}

/* A read story stays in place, greyed, when "Show read" is on.
   The greying is on the CONTENT, not a recessed card background: the
   surface-dim token is also `.alth3-vote-btn:hover`'s background, so tinting
   the whole card made the vote buttons' hover state invisible on exactly the
   cards a reader is most likely to be un-marking.
   It is also applied to the individual pieces rather than to
   `.alth3-item-clickable`, so the top row stays out of it. Parent `opacity`
   creates a stacking context that a child CANNOT opt out of, and dimming the
   whole block put the "read" badge — the element added specifically to say
   why the card is grey — at roughly 1.3:1 against the surface. */
.alth3-item-read .alth3-thumb,
.alth3-item-read .alth3-item-title,
.alth3-item-read .alth3-item-text,
.alth3-item-read .alth3-item-meta { opacity: 0.6; }
.alth3-item-read .alth3-item-title { font-weight: 400; }
.alth3-badge-read {
    background: transparent;
    color: var(--m-text-muted);
    border-style: dashed;
}

/* "Show read (N)" — the switch sits inline with the two filter dropdowns. */
.alth3-show-read {
    display: flex;
    align-items: center;
    margin: 0;
    min-height: 34px;
    font-size: 13px;
    color: var(--m-text-soft);
}
.alth3-show-read .form-check-input { cursor: pointer; margin-top: 0; }
.alth3-show-read .form-check-label { cursor: pointer; margin-bottom: 0; }
.alth3-read-count {
    font-family: var(--m-font-mono);
    font-size: 12px;
    color: var(--m-text-muted);
}

/* Screen-reader-only text: present in the accessibility tree, invisible on
   screen. Bootstrap ships .visually-hidden, but the app's own components
   should not depend on a vendor class name that a theme swap could drop. */
.m-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Feedback toast — small charcoal pill bottom-right */
.feedback-toast {
    border: 1px solid var(--m-charcoal) !important;
    border-radius: var(--m-r-pill) !important;
    background: var(--m-charcoal) !important;
    color: var(--m-text-on-dark) !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
    box-shadow: var(--m-shadow-lift);
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}
.feedback-toast .toast-header,
.feedback-toast .toast-body {
    background: transparent !important;
    border: 0 !important;
    color: var(--m-text-on-dark) !important;
    padding: 0 !important;
    font-size: 13px !important;
}
.feedback-toast-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    line-height: 1;
}
.feedback-toast-glyph-up   { color: #5fc992; }
.feedback-toast-glyph-down { color: #ff8a8a; }
.feedback-toast-text { font-weight: 500; }
.feedback-toast.feedback-toast-up   { box-shadow: 0 0 0 1px rgba(33, 160, 86, 0.45), var(--m-shadow-lift); }
.feedback-toast.feedback-toast-down { box-shadow: 0 0 0 1px rgba(179, 56, 47, 0.45), var(--m-shadow-lift); }


/* =============================================================================
   17. Settings — themed dbc.Card panels
   ============================================================================= */

#settings-page {
    background: var(--m-bg);
    min-height: calc(100vh - 64px);
    padding: 40px 0 72px;
}

#settings-page > div { padding-top: 0 !important; padding-bottom: 0 !important; }

#settings-page .container { max-width: 760px; }

/* One section of the settings page (Nov 2026 layout). */
#settings-page .m-set-card {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-lg);
    box-shadow: var(--m-shadow-card);
    padding: 22px 22px 24px;
    margin-bottom: 16px;
}
#settings-page .m-set-title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--m-text);
    margin: 0;
}
#settings-page .m-set-hint {
    font-size: 13px;
    color: var(--m-text-muted);
    line-height: 1.5;
    margin: 4px 0 16px;
}
#settings-page .m-set-field + .m-set-field { margin-top: 22px; }
#settings-page .m-set-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--m-text);
}
#settings-page .m-set-field-hint {
    font-size: 12px;
    color: var(--m-text-muted);
    line-height: 1.5;
    margin: 2px 0 8px;
}

/* Interests as a quiet list with a small remove button per row. */
#settings-page .m-set-topics {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-md);
    overflow: hidden;
}
#settings-page .m-set-topic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 8px 10px 14px;
    background: var(--m-surface);
}
#settings-page .m-set-topic + .m-set-topic { border-top: 1px solid var(--m-border); }
#settings-page .m-set-topic.is-flagged { background: var(--m-surface-dim); }
#settings-page .m-set-topic-label { display: flex; flex-direction: column; min-width: 0; }
#settings-page .m-set-topic-text { font-size: 15px; color: var(--m-text); overflow-wrap: anywhere; }
#settings-page .m-set-topic-note { font-size: 12px; color: var(--m-warning); margin-top: 2px; }
#settings-page .m-set-topic-remove {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--m-r-pill);
    background: transparent;
    color: var(--m-text-quiet);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
#settings-page .m-set-topic-remove:hover { background: var(--m-accent-soft); color: var(--m-danger); }

/* Folded extras: the bio helper and the "Advanced" section. */
#settings-page .m-set-details { margin-top: 16px; }
#settings-page .m-set-details > .m-set-summary,
#settings-page .m-set-summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--m-text-soft);
}
#settings-page .m-set-summary-lg { font-size: 17px; font-weight: 600; color: var(--m-text); }
#settings-page details.m-set-card[open] > .m-set-summary { margin-bottom: 16px; }
#settings-page .m-set-link-danger {
    display: block;
    margin-top: 18px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    color: var(--m-text-muted);
    text-decoration: underline;
    cursor: pointer;
}
#settings-page .m-set-link-danger:hover { color: var(--m-danger); }

/* Discovery categories as wrap-around chips. */
#settings-page .m-set-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
#settings-page .m-set-chips .form-check { margin: 0; padding: 0; }
#settings-page .m-set-chips .form-check-input { position: absolute; opacity: 0; pointer-events: none; }
#settings-page .m-set-chips .form-check-label {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-pill);
    background: var(--m-surface);
    font-size: 13px !important;
    color: var(--m-text-muted);
    cursor: pointer;
    user-select: none;
}
#settings-page .m-set-chips .form-check-input:checked + .form-check-label {
    background: var(--m-charcoal);
    border-color: var(--m-charcoal);
    color: var(--m-text-on-dark) !important;  /* beats the global label colour */
}
#settings-page .m-set-chips .form-check-input:focus-visible + .form-check-label { box-shadow: var(--m-shadow-focus); }

/* Save stays on screen while scrolling. */
#settings-page .m-set-savebar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 8px -12px 0;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, rgba(247, 244, 237, 0), var(--m-bg) 30%);
}
#settings-page .m-set-savebar .alert { margin-bottom: 10px; }

/* dbc.Card global restyle (used by settings + account) */
.card {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-r-lg) !important;
    box-shadow: var(--m-shadow-card) !important;
    color: var(--m-text);
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--m-border) !important;
    padding: 18px 24px !important;
    color: var(--m-text) !important;
}
.card-header h5 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.2px;
    margin: 0;
    color: var(--m-text);
}

.card-body { padding: 24px !important; color: var(--m-text-soft); }

.card.border-danger {
    border-color: rgba(179, 56, 47, 0.40) !important;
}


/* =============================================================================
   18. About page — editorial typography
   ============================================================================= */

#about-page,
.about-wrap {
    background: var(--m-bg);
    padding: 64px 0 96px;
}

#about-page h2,
.about-wrap h2 {
    font-size: clamp(34px, 4vw, 46px);
    font-weight: 600;
    letter-spacing: -1.2px;
    margin-bottom: 16px;
    color: var(--m-text);
}

#about-page h4,
.about-wrap h4 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.3px;
    margin-top: 40px !important;
    margin-bottom: 14px !important;
    color: var(--m-text);
}

#about-page p, #about-page li,
.about-wrap p, .about-wrap li {
    color: var(--m-text-soft);
    font-size: 16px;
    line-height: 1.65;
}

#about-page .lead,
.about-wrap .lead {
    font-size: 19px;
    color: var(--m-text-muted);
    line-height: 1.55;
    margin-bottom: 32px;
}

#about-page ul, .about-wrap ul { padding-left: 20px; }
#about-page li, .about-wrap li { margin-bottom: 8px; }

#about-page hr, .about-wrap hr {
    border: 0;
    border-top: 1px solid var(--m-border);
    margin: 32px 0;
}

/* About page section variants */
.m-about-intro {
    position: relative;
    padding: 72px 0 32px;
    overflow: hidden;
}
.m-about-intro-container {
    position: relative;
    z-index: 1;
}
.m-about-narrow { max-width: 880px; }
/* Legal/contact "Related" links: five buttons do not fit one phone-width
   row, and .m-nav-right does not wrap by itself (it is also the navbar's). */
#legal-page .m-legal-related { flex-wrap: wrap; }


/* =============================================================================
   19. Admin monitor — KPI cards + tabs (cream)
   ============================================================================= */

#admin-monitor-page {
    max-width: 1240px !important;
    margin: 0 auto;
    padding: 32px 24px 72px !important;
    background: var(--m-bg);
}

#admin-monitor-page .admin-header {
    margin-bottom: 24px;
    border-bottom: 1px solid var(--m-border);
    padding-bottom: 12px;
}
#admin-monitor-page .admin-h2 {
    color: var(--m-text);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.6px;
    margin-bottom: 4px;
}
#admin-monitor-page .admin-subtitle {
    color: var(--m-text-muted);
    font-style: normal;
    font-size: 13px;
}

#admin-monitor-page .admin-tab {
    padding-top: 24px;
    min-height: 400px;
}

#admin-monitor-page .admin-kpi-card {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-r-lg) !important;
    box-shadow: var(--m-shadow-card);
}
#admin-monitor-page .admin-kpi-title {
    color: var(--m-text-muted);
    font-family: var(--m-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight: 500;
}
#admin-monitor-page .admin-kpi-value {
    color: var(--m-text);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.8px;
    margin-top: 8px;
    line-height: 1;
}
#admin-monitor-page .admin-kpi-sub {
    color: var(--m-text-muted);
    font-size: 12px;
    margin-top: 6px;
}

/* Admin tabs use the global .nav-tabs styling above */


/* =============================================================================
   20. dcc.Slider — coral-themed
   ============================================================================= */

.rc-slider-track {
    background-color: var(--m-accent) !important;
    height: 4px !important;
}
.rc-slider-rail {
    background-color: var(--m-border) !important;
    height: 4px !important;
}
.rc-slider-handle {
    border: 2px solid var(--m-accent) !important;
    background-color: var(--m-surface) !important;
    opacity: 1 !important;
    width: 16px !important;
    height: 16px !important;
    margin-top: -6px !important;
    box-shadow: var(--m-shadow-card) !important;
}
.rc-slider-handle:hover,
.rc-slider-handle:focus,
.rc-slider-handle-active:active {
    border-color: var(--m-accent-hi) !important;
    box-shadow: var(--m-shadow-focus) !important;
}
.rc-slider-dot {
    border-color: var(--m-border) !important;
    background-color: var(--m-surface) !important;
    width: 8px !important;
    height: 8px !important;
    bottom: -2px !important;
}
.rc-slider-dot-active { border-color: var(--m-accent) !important; }
.rc-slider-mark-text {
    color: var(--m-text-muted) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}
.rc-slider-mark-text-active {
    color: var(--m-text) !important;
    font-weight: 500 !important;
}

/* Hide slider numeric input boxes (we don't use them) */
.dash-slider-container .dash-input-container,
.dash-range-slider-input,
.dash-range-slider-min-input,
.dash-range-slider-max-input { display: none !important; }


/* =============================================================================
   21. Links
   ============================================================================= */

a:not(.m-btn):not(.nav-link):not(.navbar-brand):not(.m-nav-tab):not(.m-card-dark a),
.text-primary {
    color: var(--m-accent) !important;
    text-decoration: none;
}

a:not(.m-btn):not(.nav-link):not(.navbar-brand):not(.m-nav-tab):hover {
    color: var(--m-accent-hi) !important;
    text-decoration: underline;
}

.text-muted   { color: var(--m-text-muted) !important; }
.text-danger  { color: var(--m-danger) !important; }
.text-success { color: var(--m-success) !important; }


/* =============================================================================
   22. Modals
   ============================================================================= */

.modal-content {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-r-2xl) !important;
    color: var(--m-text);
    box-shadow: rgba(28, 28, 28, 0.18) 0 24px 60px;
}
.modal-header {
    border-bottom: 1px solid var(--m-border) !important;
    padding: 20px 24px !important;
}
.modal-header .modal-title {
    color: var(--m-text);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.3px;
}
.modal-body  { padding: 20px 24px !important; }
.modal-footer {
    border-top: 1px solid var(--m-border) !important;
    padding: 16px 24px !important;
}


/* =============================================================================
   23. Bootstrap alerts — soften to match design
   ============================================================================= */

.alert {
    border-radius: var(--m-r-md) !important;
    border: 1px solid transparent !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    line-height: 1.55;
}
.alert-info {
    background: var(--m-accent-soft) !important;
    border-color: var(--m-accent-line) !important;
    color: var(--m-text) !important;
}
.alert-success {
    background: rgba(33, 160, 86, 0.10) !important;
    border-color: rgba(33, 160, 86, 0.30) !important;
    color: var(--m-text) !important;
}
.alert-danger {
    background: rgba(179, 56, 47, 0.08) !important;
    border-color: rgba(179, 56, 47, 0.30) !important;
    color: var(--m-text) !important;
}
.alert-warning {
    background: rgba(196, 123, 27, 0.10) !important;
    border-color: rgba(196, 123, 27, 0.30) !important;
    color: var(--m-text) !important;
}
.alert-secondary {
    background: var(--m-surface-dim) !important;
    border-color: var(--m-border) !important;
    color: var(--m-text) !important;
}

.alert-heading { color: var(--m-text) !important; font-weight: 600 !important; }
.alert a { color: var(--m-accent) !important; font-weight: 500; }


/* =============================================================================
   24. Misc Dash defaults — loading spinner, hide debug menu
   ============================================================================= */

.loading-wrapper { position: relative; min-height: 200px; }

.dash-spinner::before {
    border-color: var(--m-border-strong) !important;
    border-top-color: var(--m-accent) !important;
}

.dash-debug-menu,
.dash-debug-menu__outer { display: none !important; }

/* Disable pointer-events on news grid while loading */
._dash-loading .alth3-list,
._dash-loading .news-card-grid {
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

/* dcc.Loading default color (we override per-component to charcoal) */
.dash-spinner.dash-default-spinner {
    color: var(--m-charcoal) !important;
}


/* =============================================================================
   24b. Utility classes — minimal helpers to keep Python neutral
   ============================================================================= */

/* Spacing utilities (use sparingly — design rhythm is 8px base) */
.m-mt-xl     { margin-top: 48px; }
.m-mt-lg     { margin-top: 32px; }
.m-mt-md     { margin-top: 24px; }
.m-mt-sm     { margin-top: 16px; }
.m-mb-xl     { margin-bottom: 48px; }
.m-mb-lg     { margin-bottom: 32px; }

/* Width helpers for headline / prose blocks */
.m-w-prose         { max-width: 640px; }
.m-w-prose-md      { max-width: 560px; }
.m-w-prose-narrow  { max-width: 480px; }

/* Section that draws a top divider (replaces inline borderTop styles) */
.m-section-bordered { border-top: 1px solid var(--m-border); }

/* About-page verification-level row */
.m-verif-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--m-border);
    font-size: 15px;
}
.m-verif-row:last-child { border-bottom: 0; }
.m-verif-row .m-verif-name {
    font-size: 12px;
    flex-shrink: 0;
    min-width: 76px;
}

/* Detail-modal helpers */
.m-detail-meta-row {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 13px;
}
.m-detail-badges { margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.m-detail-notes {
    color: var(--m-text-muted);
    font-size: 13px;
    margin-bottom: 20px;
    line-height: 1.55;
}
.m-detail-h {
    margin-top: 28px;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--m-text);
}
.m-detail-source-row {
    margin-bottom: 8px;
    font-size: 14px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.m-detail-actions { margin-top: 24px; }

/* "Why it matters" — the factual context block inside the detail modal. */
.m-detail-why {
    margin-top: 18px;
    padding: 14px 16px;
    background: var(--m-surface-dim);
    border-left: 2px solid var(--m-accent);
    border-radius: 0 var(--m-r-md, 8px) var(--m-r-md, 8px) 0;
}
.m-detail-why-label {
    font-family: var(--m-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px;
    font-weight: 500;
    color: var(--m-text-muted);
    margin-bottom: 6px;
}
.m-detail-why-text {
    margin: 0;
    color: var(--m-text-soft);
    font-size: 14px;
    line-height: 1.55;
}


/* =============================================================================
   24d. News feed — facets, coverage note, empty state
   ============================================================================= */
/* Filtering and the coverage line are free: the feed is assembled from a
   shared cache the server already paid for, so these are pure display. */

.alth3-filterbar {
    display: flex;
    gap: 10px;
    margin: 4px 0 10px;
    flex-wrap: wrap;
}
.m-feed-modal .alth3-filter.form-select {
    flex: 1 1 180px;
    min-width: 0;
    cursor: pointer;
}
.m-feed-modal .alth3-filterbar .alth3-show-read { flex-basis: 100%; }

.alth3-coverage {
    display: block;
    color: var(--m-text-muted);
    font-size: 12px;
    font-family: var(--m-font-mono);
    letter-spacing: 0.01em;
}
.alth3-coverage-dim  { color: var(--m-text-quiet); }
.alth3-coverage-warn { color: var(--m-warning); }

.alth3-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--m-text-muted);
    background: var(--m-surface);
    border: 1px dashed var(--m-border);
    border-radius: var(--m-r-lg);
}

/* Discovery items come from the exploration mix, not the user's own topics.
   Labelling them is what makes an off-topic story read as a suggestion. */
.alth3-badge-explore {
    background: var(--m-accent-soft);
    color: var(--m-accent);
    border-color: var(--m-accent-line);
}

/* Corroboration count — the honest verification signal. */
.alth3-sources-count {
    color: var(--m-text-quiet);
    font-size: 11px;
    font-family: var(--m-font-mono);
    margin-left: 8px;
    white-space: nowrap;
}


/* =============================================================================
   25. Responsive
   ============================================================================= */

@media (max-width: 960px) {
    .m-feature-grid    { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .m-hero { padding: 64px 0 56px; }
    .m-hero-title { letter-spacing: -1px; }
    .m-hero-diagram { grid-template-columns: repeat(2, 1fr); }
    .m-hero-diagram-step + .m-hero-diagram-step:nth-child(3),
    .m-hero-diagram-step + .m-hero-diagram-step:nth-child(4) {
        border-top: 1px solid var(--m-border);
    }
    .m-hero-diagram-step + .m-hero-diagram-step:nth-child(3) { border-left: none; }

    .m-contrast-grid   { grid-template-columns: 1fr; }
    .m-steps-grid      { grid-template-columns: 1fr 1fr; }
    .m-step-card + .m-step-card:nth-child(3),
    .m-step-card + .m-step-card:nth-child(4) { border-top: 1px solid var(--m-border); }
    .m-step-card + .m-step-card:nth-child(3) { border-left: none; }

    .m-feature-grid    { grid-template-columns: 1fr; }
    .m-stats           { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }

    .m-cta-section     { padding: 64px 0 80px; }

    .m-nav-tabs { display: none; }

    /* Phones: no picture, the whole headline. A thumbnail took a third of
       the card's width while the headline was cut at two lines, so the
       picture cost more than it added (owner feedback, Nov 2026). Pictures
       stay on wider screens, where there is room for both. */
    #dashboard-page .alth3-thumb      { display: none; }
    #dashboard-page .alth3-item-title { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
    .alth3-item-text    { display: none; }
}

@media (max-width: 480px) {
    .m-container { padding: 0 18px; }
    .m-auth-card { padding: 28px 22px; }
    .m-hero-diagram { grid-template-columns: 1fr 1fr; }
    .m-steps-grid   { grid-template-columns: 1fr; }
    .m-step-card + .m-step-card { border-left: none; border-top: 1px solid var(--m-border); }
    .m-stats        { grid-template-columns: 1fr 1fr; }
}