/* ═══════════════════════════════════════
   HOME VIEW LAYOUT
   Uses MudBlazor CSS variables injected at runtime by MudThemeProvider
═══════════════════════════════════════ */

.home-content {
    padding: 32px 32px 80px;
}

/* ── Greeting ─────────────────────────────────────── */
.home-greeting {
    margin-bottom: 32px;
}

.home-greeting-title {
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--mud-palette-text-primary);
    /* Long unbreakable display names (e.g. an Apple privaterelay.appleid.com
       email used as the fallback name) must wrap instead of overflowing the
       page padding and clipping at the device edge. */
    overflow-wrap: anywhere;
}

/* ── Activation card (#1049) ──────────────────────── */
.ij-home-activation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    margin-bottom: 32px;
    border-radius: 16px;
    background: var(--mud-palette-background-grey);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
}

.ij-home-activation-copy {
    min-width: 0;
}

.ij-home-activation-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.ij-home-activation-sub {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.ij-home-activation-cta {
    flex-shrink: 0;
    height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    border: none;
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
}

.ij-home-activation-cta:hover {
    opacity: 0.88;
}

@media (max-width: 599.95px) {
    .ij-home-activation {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 18px 20px;
    }

    .ij-home-activation-cta {
        width: 100%;
    }
}

/* ── Section header ───────────────────────────────── */
.home-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}

.home-section-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--mud-palette-text-primary);
}

.home-section-link {
    font-size: 13px;
    color: var(--mud-palette-primary);
    text-decoration: none;
    cursor: pointer;
}

.home-section-link:hover {
    text-decoration: underline;
}

/* ── Two-column layout ─────────────────────────────── */
.home-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}

@media (max-width: 960px) {
    .home-two-col {
        grid-template-columns: 1fr;
    }
}

/* Grid items default to min-width:auto, so an unbreakable child props the 1fr
   track wider than the phone and the whole page side-scrolls (measured 449px
   at a 375px viewport). Same trap as the markdown grid. */
.home-two-col > * {
    min-width: 0;
}

/* First-run users (#1049 whole-branch-review fix 5): spec order is activation
   card -> "My companies" -> Recently Viewed. CSS order only, scoped by the
   .home-two-col--first-run modifier class — markup order is untouched so
   established users (no modifier class) see no change.

   Scoped to the stacked breakpoint ONLY. The spec's ordering is a READING-order
   rule: it exists so a new user on a phone doesn't get the empty "Stocks you
   open will appear here" block between the activation card and the watchlist
   they just made. Above 960px the two columns sit side by side and both are
   visible, so there is nothing to fix — and swapping them there made first-run
   Home the only Home in the app with WatchLists on the left, which reads as a
   different page rather than the same page earlier in its life. */
@media (max-width: 960px) {
    .home-two-col--first-run > *:first-child {
        order: 2;
    }

    .home-two-col--first-run > *:last-child {
        order: 1;
    }
}

@media (max-width: 599.95px) {
    .home-content {
        padding: 20px 16px 80px;
    }
}

/* ── Stock list ────────────────────────────────────── */
.home-stock-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Watchlist grid ────────────────────────────────── */
.home-wl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 599.95px) {
    .home-wl-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1400px) {
    .home-wl-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Empty state ───────────────────────────────────── */
.home-empty,
.ij-home-wl-empty {
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
    text-align: center;
    padding: 32px 16px;
}