/* Full-width "Explained" narrative view — toggled against dashboard widgets */

.nx-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-left: auto;
    padding: 0.2rem;
    border-radius: 10px;
    border: 1px solid var(--border-color, #e6e3db);
    background: var(--bg-secondary, #f0ede4);
}

.nx-view-toggle button {
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary, #5c5a54);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.nx-view-toggle button[aria-pressed="true"] {
    background: var(--card-bg, #fff);
    color: var(--accent-teal, #0f766e);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.nx-view-toggle button:focus-visible {
    outline: 2px solid var(--accent-teal, #0f766e);
    outline-offset: 2px;
}

.nx-nav-container.nx-nav-with-toggle {
    flex-wrap: wrap;
    gap: 0.75rem;
}

.nx-dashboard-data[hidden],
.nx-explained-root[hidden] {
    display: none !important;
}

/* Explained panel */
.nx-explained-root {
    padding-bottom: 3rem;
}

.nx-explained-intro {
    margin: 0 0 2rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-secondary, #5c5a54);
    max-width: 52rem;
}

.nx-explained-questions {
    margin: 0 0 2.5rem;
    padding: 1.25rem 1.35rem;
    border-radius: 12px;
    border: 1px solid var(--border-color, #e6e3db);
    background: var(--bg-secondary, #f0ede4);
}

.nx-explained-questions h2 {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-muted, #8c8980);
    margin: 0 0 0.75rem;
}

.nx-explained-questions ul {
    margin: 0;
    padding-left: 1.2rem;
    line-height: 1.55;
    color: var(--text-primary, #1c1c1a);
}

.nx-explained-synthesis {
    margin: 0 0 2.5rem;
    padding: 1.35rem 1.5rem;
    border-radius: 12px;
    border-left: 4px solid var(--accent-teal, #0f766e);
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e6e3db);
    border-left-width: 4px;
}

.nx-explained-synthesis h2 {
    font-size: 1rem;
    margin: 0 0 0.65rem;
}

.nx-explained-synthesis p {
    margin: 0;
    line-height: 1.6;
    color: var(--text-primary, #1c1c1a);
}

.nx-explained-signals h2,
.nx-explained-sources h2 {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: 1.35rem;
    margin: 0 0 1.25rem;
    letter-spacing: -0.02em;
}

.nx-signal-card {
    margin-bottom: 1.5rem;
    padding: 1.35rem 1.5rem;
    border-radius: 14px;
    border: 1px solid var(--border-color, #e6e3db);
    background: var(--card-bg, #fff);
}

.nx-signal-card h3 {
    font-size: 1.15rem;
    margin: 0 0 0.35rem;
    line-height: 1.35;
}

.nx-signal-live {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-heading, system-ui, sans-serif);
    color: var(--accent-teal, #0f766e);
    margin: 0.25rem 0 1rem;
}

.nx-signal-live-sub {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted, #8c8980);
    margin-top: 0.2rem;
}

.nx-signal-block {
    margin-bottom: 0.85rem;
}

.nx-signal-block:last-child {
    margin-bottom: 0;
}

.nx-signal-label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-muted, #8c8980);
    margin-bottom: 0.3rem;
}

.nx-signal-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-primary, #1c1c1a);
}

.nx-signal-verdict {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.3rem 0.65rem;
    border-radius: 99px;
    margin-top: 0.7rem;
    line-height: 1.3;
    border: 1px solid transparent;
}

.nx-signal-verdict.is-concerning {
    background: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.25);
}

.nx-signal-verdict.is-reassuring {
    background: rgba(20, 184, 166, 0.14);
    color: #0f766e;
    border-color: rgba(20, 184, 166, 0.3);
}

.nx-signal-verdict.is-neutral {
    background: rgba(140, 137, 128, 0.18);
    color: var(--text-secondary, #5c5a54);
    border-color: rgba(140, 137, 128, 0.3);
}

/* Dark theme variants — the light-theme palette above is too dim against dark cards;
   higher-saturation pastels read clearly without losing the semantic meaning. */
[data-theme="dark"] .nx-signal-verdict.is-concerning {
    background: rgba(248, 113, 113, 0.15);
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.35);
}

[data-theme="dark"] .nx-signal-verdict.is-reassuring {
    background: rgba(45, 212, 191, 0.15);
    color: #5eead4;
    border-color: rgba(45, 212, 191, 0.35);
}

[data-theme="dark"] .nx-signal-verdict.is-neutral {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.35);
}

.nx-source-profile {
    margin-bottom: 1.75rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--border-color, #e6e3db);
}

.nx-source-profile:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.nx-source-profile h3 {
    font-size: 1.1rem;
    margin: 0 0 0.25rem;
}

.nx-source-profile h3 a {
    color: var(--accent-teal, #0f766e);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}

.nx-source-profile h3 a::after {
    content: " \2197"; /* north-east arrow — signals "opens external" */
    opacity: 0.6;
    font-size: 0.9em;
    margin-left: 0.15em;
}

.nx-source-profile h3 a:hover {
    border-bottom-style: solid;
}

.nx-source-dl {
    margin: 0.75rem 0 0;
    display: grid;
    gap: 0.65rem;
}

.nx-source-dl dt {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-muted, #8c8980);
}

.nx-source-dl dd {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-primary, #1c1c1a);
}

/* Landing page view toggle (same pattern) */
.landing-view-toggle {
    display: flex;
    justify-content: center;
    margin: 0 0 1.5rem;
}

.landing-dashboards-view[hidden],
.landing-sources-view[hidden] {
    display: none !important;
}

.landing-source-card {
    text-align: left;
    padding: 1.5rem;
    border-radius: 14px;
    border: 1px solid var(--border-color, #e6e3db);
    background: var(--card-bg, #fff);
    margin-bottom: 1.25rem;
}

.landing-source-used-on {
    margin-top: 1rem;
    font-size: 0.85rem;
}

.landing-source-used-on ul {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
}

.landing-source-used-on a {
    color: var(--accent-teal, #0f766e);
}

/* Jump-to-signal navigation at the top of the Explained signal list.
   For long tabs (5+ signal cards) it gives readers a quick way to hop. */
.nx-explained-jump {
    margin: 0 0 1.5rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: var(--bg-secondary, #f4f1e9);
    border: 1px solid var(--border-color, #e6e3db);
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.nx-explained-jump-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted, #8c8980);
    flex-shrink: 0;
}
.nx-explained-jump ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
}
.nx-explained-jump li {
    margin: 0;
}
.nx-explained-jump a {
    color: var(--accent-teal, #0f766e);
    text-decoration: none;
    font-size: 0.88rem;
    border-bottom: 1px dotted transparent;
    transition: border-color 120ms ease;
}
.nx-explained-jump a:hover {
    border-bottom-color: currentColor;
}

/* Compact "About this build" footer for meta cards (page-refresh stamps,
   version notes) that don't belong in the signal stack. */
.nx-explained-meta {
    margin: 2.5rem 0 0;
    padding: 1.1rem 1.25rem;
    border-radius: 10px;
    background: var(--bg-secondary, #f4f1e9);
    border: 1px solid var(--border-color, #e6e3db);
}
.nx-explained-meta h2 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-muted, #8c8980);
    margin: 0 0 0.6rem;
}
.nx-explained-meta ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}
.nx-explained-meta li {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-primary, #1c1c1a);
}
.nx-explained-meta-live {
    color: var(--text-muted, #8c8980);
    font-variant-numeric: tabular-nums;
}

/* Per-card data-freshness line — sits right under each signal card's
   title to tell readers when the underlying observation was taken
   and when we last pulled the upstream file. Muted so it doesn't
   compete with the headline number. */
.nx-signal-freshness {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    margin: 0 0 0.85rem;
    padding: 0.2rem 0.55rem;
    border-radius: 99px;
    background: var(--bg-secondary, #f4f1e9);
    border: 1px solid var(--border-color, #e6e3db);
    font-size: 0.78rem;
    color: var(--text-muted, #8c8980);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.nx-signal-freshness strong {
    color: var(--text-primary, #1c1c1a);
    font-weight: 600;
}
.nx-signal-freshness-icon {
    opacity: 0.7;
}

/* Give anchor jumps enough offset to clear the sticky page header
   (70px tall — see _shared/css/nexus.css `header.nx-header`) and
   leave ~20px of breathing room above the card title. */
.nx-signal-card {
    scroll-margin-top: 5.5rem;
}