/* Shared treatment for public editorial hubs.
   Hubs reuse the existing marketing design vocabulary. These rules provide the
   small amount of global styling needed for hub cards and preview mockups that
   otherwise live only in page-scoped feature CSS. */

a.scenario-card {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-slow);
}

a.scenario-card:hover {
    color: inherit;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--mkt-shadow-lg);
    border-color: rgba(30, 64, 175, 0.22);
}

a.cap-card {
    display: block;
    color: inherit;
    text-decoration: none;
}

a.cap-card:hover {
    color: inherit;
    text-decoration: none;
}

.scenario-link {
    display: inline-block;
    margin-top: 0.9rem;
    color: var(--mkt-primary);
    font-size: 0.8rem;
    font-weight: 750;
    text-decoration: none;
}

a.scenario-card:hover .scenario-link,
a.cap-card:hover .scenario-link {
    text-decoration: underline;
}

/* Hub preview: recall/search input */
.preview-searchbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--mkt-radius);
    font-size: 0.875rem;
    color: var(--mkt-text);
}

.sb-icon { color: #9ca3af; font-size: 1.25rem; }
.sb-text { flex: 1; min-width: 0; }
.sb-kbd {
    font-family: monospace;
    font-size: 0.625rem;
    color: #9ca3af;
    background: #f1f5f9;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
}

.preview-chips {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
}

.pchip {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    white-space: nowrap;
    color: var(--mkt-text-secondary);
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.pchip.active {
    color: var(--mkt-primary);
    background: rgba(30, 64, 175, 0.06);
    border-color: rgba(30, 64, 175, 0.2);
}

/* Hub preview: source/result rows */
.preview-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.prow {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--mkt-radius);
    border: 1px solid transparent;
}

.prow-high {
    background: rgba(30, 64, 175, 0.035);
    border-color: rgba(30, 64, 175, 0.12);
}

.prow-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 800;
}

.prow-icon .material-symbols-outlined { font-size: 1.125rem; }
.prow-icon.gmail { background: #fef2f2; color: #dc2626; }
.prow-icon.m365 { background: #eff6ff; color: #2563eb; }

.prow-body { flex: 1; min-width: 0; }
.prow-body strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--mkt-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prow-meta {
    display: block;
    font-size: 0.75rem;
    color: var(--mkt-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prow-tag {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--mkt-text-secondary);
    background: #f1f5f9;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Hub preview: lightweight archive-verification checklist */
.archive-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.archive-check-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--mkt-radius);
    background: #fff;
}

.archive-check-row .check-icon {
    color: #16a34a;
    font-size: 1.1rem;
    margin-top: 0.05rem;
}

.archive-check-row strong,
.archive-check-row span {
    display: block;
}

.archive-check-row strong {
    color: var(--mkt-text);
    font-size: 0.82rem;
    margin-bottom: 0.12rem;
}

.archive-check-row span {
    color: var(--mkt-text-secondary);
    font-size: 0.72rem;
    line-height: 1.4;
}

/* Hub preview: lightweight metrics card */
.analytics-card {
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--mkt-radius);
}

.analytics-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mkt-secondary);
    margin-bottom: 0.75rem;
}

.analytics-types {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.at-chip {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.at-chip strong { font-weight: 800; }
.at-conversation { background: rgba(30,64,175,0.08); color: var(--mkt-primary); }
.at-newsletter { background: rgba(245,158,11,0.08); color: #b45309; }
.at-notification { background: rgba(139,92,246,0.08); color: #7c3aed; }
.at-autoreplies { background: rgba(156,163,175,0.1); color: #6b7280; }