/* =============================================================
   ChatMMM Secondary Pages v2 (Alerts / Saved / Educational)
   Shared layout primitives kept tiny — these pages reuse the
   .settings-section card from settings.css for consistency.
   ============================================================= */

@layer components {

    /* Small extension to settings.css */
    .settings-section__subtitle {
        margin: 4px 0 0;
        font-size: var(--fs-xs);
        color: var(--text-muted);
    }
    .settings-row__error {
        font-size: var(--fs-xs);
        color: var(--bear);
        margin-top: 6px;
        display: none;
    }

    /* ---------- Shared two-column page layout ---------- */
    .page2 {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }
    .page2--with-rail {
        grid-template-columns: minmax(0, 1fr) var(--rightrail-w);
    }
    @media (max-width: 1180px) {
        .page2--with-rail { grid-template-columns: 1fr; }
    }

    /* ---------- Generic info banner ---------- */
    .info-banner {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
        border-radius: 12px;
        border: 1px solid var(--brand-200);
        background: var(--brand-50);
        color: var(--brand-700);
        font-size: var(--fs-sm);
        margin-bottom: 20px;
    }
    .info-banner i { margin-top: 2px; color: var(--brand-600); }
    .info-banner__cta {
        margin-left: auto;
        background: var(--brand-600);
        color: #fff;
        padding: 6px 12px;
        border-radius: 8px;
        font-weight: 600;
        font-size: var(--fs-xs);
        text-decoration: none;
        white-space: nowrap;
        transition: background var(--dur-fast) var(--ease-out);
    }
    .info-banner__cta:hover { background: var(--brand-700); }

    /* ---------- Alert frequency picker ---------- */
    .freq-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    @media (max-width: 560px) { .freq-grid { grid-template-columns: 1fr; } }

    .freq-card {
        position: relative;
        text-align: left;
        padding: 16px;
        border-radius: 12px;
        border: 1px solid var(--border-color, #e5e7eb);
        background: var(--surface-card);
        cursor: pointer;
        transition:
            border-color var(--dur-fast) var(--ease-out),
            box-shadow var(--dur-fast) var(--ease-out),
            transform var(--dur-fast) var(--ease-out);
        font: inherit;
        color: inherit;
    }
    .freq-card:hover {
        border-color: var(--brand-400);
        transform: translateY(-1px);
    }
    .freq-card.is-selected {
        border-color: var(--brand-600);
        box-shadow: var(--elev-glow-brand);
    }
    .freq-card:focus-visible,
    .ticker-row__remove:focus-visible {
        outline: none;
        border-color: var(--brand-500);
        box-shadow: var(--elev-glow-brand);
    }
    .freq-card__head {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 6px;
    }
    .freq-card__icon {
        width: 36px; height: 36px;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 10px;
        background: var(--brand-50);
        color: var(--brand-600);
    }
    .freq-card__title { font-weight: 700; font-size: var(--fs-md); margin: 0; }
    .freq-card__desc  { font-size: var(--fs-xs); color: var(--text-muted); margin: 0; }
    .freq-card__pill {
        position: absolute;
        top: 12px; right: 12px;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: var(--tracking-caps);
        padding: 2px 7px;
        border-radius: 999px;
    }
    .freq-card__pill--free { background: var(--bull-soft); color: var(--bull-strong); }
    .freq-card__pill--pro  { background: transparent; color: var(--pro-strong); border: 1px solid var(--pro); }

    /* ---------- Tracked tickers list ---------- */
    .ticker-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .ticker-row {
        display: grid;
        grid-template-columns: 64px 1fr auto;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 10px;
        background: var(--surface-sunken);
        transition: background var(--dur-fast) var(--ease-out);
    }
    .ticker-row:hover { background: var(--brand-50); }
    .ticker-row__sym {
        font-family: var(--font-mono);
        font-weight: 700;
        font-size: var(--fs-md);
        color: var(--text-primary);
    }
    .ticker-row__name {
        font-size: var(--fs-sm);
        color: var(--text-secondary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .ticker-row__remove {
        background: transparent;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: 6px 10px;
        border-radius: 8px;
        transition:
            background var(--dur-fast) var(--ease-out),
            color var(--dur-fast) var(--ease-out);
    }
    .ticker-row__remove:hover { background: rgba(220,38,38,0.10); color: var(--bear); }

    .empty-state {
        text-align: center;
        padding: 40px 20px;
        color: var(--text-muted);
    }
    .empty-state i { font-size: 28px; margin-bottom: 10px; opacity: 0.45; display: block; }

    /* ---------- Saved analyses grid (reuses dash card look) ---------- */
    .saved-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 14px;
    }

    /* ---------- Educational page typography ---------- */
    .doc {
        max-width: 760px;
        margin: 0 auto;
    }
    .doc h2 {
        font-size: var(--fs-xl);
        font-weight: 700;
        color: var(--text-primary);
        margin: 32px 0 12px;
        letter-spacing: var(--tracking-tight);
    }
    .doc h2:first-child { margin-top: 0; }
    .doc p, .doc li {
        font-size: var(--fs-md);
        line-height: var(--lh-base, 1.65);
        color: var(--text-secondary);
    }
    .doc ul {
        padding-left: 20px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 12px 0;
    }
    .doc li::marker { color: var(--brand-600); }
    .doc strong { color: var(--text-primary); }

    .doc-callout {
        display: grid;
        grid-template-columns: 28px 1fr;
        gap: 14px;
        padding: 16px 18px;
        border-radius: 12px;
        margin: 18px 0;
        background: var(--surface-card);
        border: 1px solid var(--border-color, #e5e7eb);
        border-left-width: 4px;
    }
    .doc-callout i {
        font-size: 20px;
        color: var(--brand-600);
        margin-top: 2px;
    }
    .doc-callout--warn { border-left-color: var(--pro); }
    .doc-callout--warn i { color: var(--pro); }
    .doc-callout--danger { border-left-color: var(--bear); }
    .doc-callout--danger i { color: var(--bear); }
    .doc-callout--info { border-left-color: var(--brand-600); }
    .doc-callout p:last-child { margin-bottom: 0; }
    .doc-callout p:first-child { margin-top: 0; }
}