/* ═══════════════════════════════════════
   THEME TOKENS (news redesign — nv-*)
   Mirror MudThemeProvider's own var switching: light on :root,
   dark overridden under .mud-theme-dark (applied to the root in dark mode).
═══════════════════════════════════════ */

:root {
    /* Landing-page accents moved to tokens.css. */
    --nv-line-2: #ededf1;
    --nv-cat-amber: #c2740a;
    --nv-cat-teal: #0e7c8b;
    /* #785: Meeting's own accent. Rose fills the one open slot in the category
       hue wheel — blue/purple/green/amber/teal/red are all taken — and stays
       clear of Legal's red. Deep on white, brighter on near-black (same shape
       as amber/teal). Update keeps the neutral text-secondary: it is the
       classifier's fallback category, so "no specific colour" is correct for it. */
    --nv-cat-rose: #b5257e;
    /* Rail facet hover — kept below the active-row background so selection stays dominant. */
    --nv-hover-bg: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
    /* Feed-row hover. Rows have no selected state, so this can be more pronounced. */
    --nv-row-hover: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
}

/* Dark overrides. MudBlazor gives no theme class, so MainLayout adds ij-theme-dark
   to the main content wrapper (an ancestor of the /news view) — these cascade down. */
.ij-theme-dark {
    --nv-line-2: #1c1c1f;
    --nv-cat-amber: #ff9f0a;
    --nv-cat-teal: #30c8d6;
    --nv-cat-rose: #f472b6;
    /* On near-black a low white tint is invisible — bump both, rows more than facets. */
    --nv-hover-bg: color-mix(in srgb, var(--mud-palette-text-primary) 9%, transparent);
    --nv-row-hover: color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent);
}

/* The official Claude spark logomark (shared ClaudeMark component) — keep it
   rigid inside flex rows (eyebrows, chat name lines). */
.ij-claude-mark {
    flex-shrink: 0;
}

/* Blazor's FocusOnNavigate (Routes.razor) focuses the page h1 after each route
   change so screen readers announce the new page. Headings are only ever focused
   programmatically (tabindex="-1" is not tab-reachable), so the browser's focus
   ring on them is pure visual noise. */
h1:focus-visible {
    outline: none;
}

/* ═══════════════════════════════════════
   APP BAR — Frosted glass (top & bottom)
   Uses MudBlazor CSS variables injected at runtime by MudThemeProvider
═══════════════════════════════════════ */

.mud-appbar {
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}

/* Top app bar */
.mud-appbar:not(.mud-appbar-fixed-bottom) {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    /* Honour the device notch / status bar (standalone PWA on notched iPhones)
       and the landscape side-notch. env() resolves to 0 in a normal browser tab
       and on desktop, so there is no visible effect there. */
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* Pair the top-bar notch padding above with a matching content offset so the
   page doesn't slide under the (now taller) bar. Equals the default 64px when
   the inset is 0 (browser tab / desktop). */
.mud-main-content {
    margin-top: calc(64px + env(safe-area-inset-top, 0px)) !important;
}

/* Bottom tab bar */
.mud-appbar-fixed-bottom {
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom: none;
    /* Lift the tab labels above the iPhone home indicator. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* ═══════════════════════════════════════
   IJ BRAND (logo box + title)
═══════════════════════════════════════ */

.ij-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    flex-shrink: 0;
}

.ij-logo-img {
    border-radius: 8px;
    flex-shrink: 0;
}

.ij-title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--mud-palette-appbar-text);
}

/* ═══════════════════════════════════════
   SEARCH BUTTON — Apple-style soft pill
═══════════════════════════════════════ */

.ij-search-btn.mud-button-root {
    border-radius: 20px !important;
    min-width: 240px;
    border-color: color-mix(in srgb, var(--mud-palette-text-primary) 14%, transparent) !important;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent) !important;
    transition: background-color 0.15s, border-color 0.15s !important;
}

.ij-search-btn.mud-button-root:hover {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 9%, transparent) !important;
    border-color: color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent) !important;
}

/* Search pill contents (design 11A): placeholder left, shortcut badge hugging
   the right edge. The badge text comes from CSS `content` so the platform
   modifier swaps off :root.is-mac without a re-render (set in App.razor head). */
.ij-search-btn .mud-button-label {
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.ij-search-btn-text {
    flex: 1;
    text-align: left;
}

.ij-search-kbd {
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 2.5px 7px;
    margin-left: 10px;
    background: var(--mud-palette-background);
    white-space: nowrap;
    flex-shrink: 0;
}

.ij-search-kbd::before {
    content: "Ctrl K";
}

:root.is-mac .ij-search-kbd::before {
    content: "⌘K";
}

/* Ask AI tooltip shortcut hint (rebind discoverability: ⌘J / Ctrl J) */
.ij-kbd-hint-ai::before {
    content: "Ctrl J";
}

:root.is-mac .ij-kbd-hint-ai::before {
    content: "⌘J";
}

/* ═══════════════════════════════════════
   TOOLBAR ACTIONS — Unified icon group
═══════════════════════════════════════ */

.ij-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* The MudBadge unread count overlaps the bell button's right edge (~14px
   overhang measured), so without extra room it nearly touches the avatar.
   Clear the BADGE's right edge from the avatar circle by ≥12px (16px measured
   at this value; signed-in only — the wrapper exists only in the Authorized
   branch). */
.ij-bell-clearance {
    display: inline-flex;
    margin-right: 18px;
}

/* Prerendered interactive controls are visible before the Blazor circuit
   connects; until then their click handlers are dead. Dim and block them so they
   read as "loading" rather than clickable-but-unresponsive. The pending class is
   removed on the interactive re-render (driven by RendererInfo.IsInteractive);
   the always-on gate keeps a transition so they fade back in instead of popping. */
.ij-interactive-gate {
    transition: opacity 0.2s ease;
}

.ij-pending-interactive {
    opacity: 0.55;
    pointer-events: none;
}

/* Consistent icon button size and weight across the toolbar */
.ij-toolbar-icon-btn.mud-icon-button {
    width: 36px !important;
    height: 36px !important;
    padding: 6px !important;
    border-radius: 10px !important;
    transition: background-color 0.15s !important;
}

.ij-toolbar-icon-btn.mud-icon-button:hover {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent) !important;
}

.ij-toolbar-icon-btn.mud-icon-button .mud-icon-root {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

.ij-login-btn.mud-button-filled {
    height: 36px !important;
    border-radius: 10px !important;
    background-color: #007AFF !important;
    color: #ffffff !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    transition: background-color 0.15s !important;
}

.ij-login-btn.mud-button-filled:hover {
    background-color: #0066CC !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════
   SEARCH MODAL
═══════════════════════════════════════ */

/* Scrollbar suppression (moved from inline <style>) */
.hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* List container — fixed height with scroll */
.ij-search-modal-list {
    height: 400px;
    overflow-y: auto;
}

/* Empty state — same height so the modal doesn't jump */
.ij-search-empty {
    height: 300px;
}

/* Keyboard-highlighted search item */
.ij-search-item--active {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) !important;
}

/* Search field inside modal — soft rounded pill, no harsh border */
.ij-search-modal-field .mud-input.mud-input-outlined {
    border-radius: 10px !important;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent) !important;
}

.ij-search-modal-field .mud-input-outlined-border {
    border-radius: 10px !important;
    border-color: color-mix(in srgb, var(--mud-palette-text-primary) 14%, transparent) !important;
}

/* Rich result rows (search handoff, direction A) */
.ij-search-logo {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 10px;
    overflow: hidden;
}

.ij-search-logo--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9375rem;
    color: #fff;
}

/* Deterministic avatar gradients — bucket picked by SearchRowFormat.GradientIndex */
.ij-search-logo--g0 {
    background: linear-gradient(135deg, #f0b429, #c98a0b);
}

.ij-search-logo--g1 {
    background: linear-gradient(135deg, #b23a48, #7c1f2c);
}

.ij-search-logo--g2 {
    background: linear-gradient(135deg, #e05c2a, #a83a12);
}

.ij-search-logo--g3 {
    background: linear-gradient(135deg, #2997ff, #0a58ca);
}

.ij-search-logo--g4 {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
}

.ij-search-logo--g5 {
    background: linear-gradient(135deg, #3dcb6c, #16a34a);
}

.ij-search-name {
    font-size: 0.9375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ij-search-meta {
    font-size: 0.75rem;
}

.ij-search-mark {
    background: color-mix(in srgb, var(--mud-palette-info) 22%, transparent);
    color: var(--mud-palette-info);
    border-radius: 3px;
    padding: 0 1px;
}

.ij-search-exchange {
    flex: none;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 3px 8px;
}

.ij-search-kbd-hints {
    display: flex;
    gap: 16px;
    padding: 9px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
}

/* Keyboard affordances are meaningless on touch — hide the footer there (incl. the MAUI head) */
@media (hover: none), (max-width: 600px) {
    .ij-search-kbd-hints {
        display: none;
    }
}

/* ═══════════════════════════════════════
   DISCLAIMER PAGE
═══════════════════════════════════════ */

.ij-disclaimer-page {
    padding-top: 3rem;
    padding-bottom: 5rem;
}

.ij-back-btn.mud-button-root {
    margin-left: -6px; /* optically align chevron with left edge */
}

.ij-disclaimer-title {
    font-weight: 600;
    letter-spacing: -0.4px;
}

/* Primary, not secondary (#1245). This is the one place in the app where long-form prose
   IS the content: a reader on /terms or /refund-policy is there to read the words, not to
   skim past them to a control. Secondary grey is right for the captions AROUND structure
   (/help's icon cards use it correctly) and wrong for ten sections of unbroken body text,
   which is what made the legal pages read as a wall of grey rather than as part of the app.
   Measured: secondary is 5.1:1 on white, primary 16.8:1. Both tokens are redefined in the
   dark block of tokens.css, so dark follows without a second rule. */
.ij-disclaimer-paragraph {
    line-height: 1.75;
    color: var(--ij-text-primary);
    text-wrap: pretty;
}

/* Wayfinding caption row under a legal page's title (Canvas-12 1A): version ·
   length · "word for word" — non-legal chrome, never a paraphrase. */
.ij-legal-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.ij-legal-meta-dot {
    color: var(--ij-text-tertiary);
}

/* Margin ¶ numerals (LegalContent ShowIndices) — tertiary ornament, deliberately
   unselectable so copied text is exactly the accepted string. */
.ij-legal-p {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 14px;
    align-items: start;
}

.ij-legal-idx {
    padding-top: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ij-text-tertiary);
    font-variant-numeric: tabular-nums;
    user-select: none;
}

/* ═══════════════════════════════════════
   REFUND POLICY — 1A hero + short-version rail
═══════════════════════════════════════ */

/* The only legal page on the full-gutter workspace (ij-page-content, like
   /connect #749): the prose keeps its reading measure in the left grid column
   while the sticky "short version" rides right (/connect 13B recipe). Its three
   siblings stay MaxWidth.Small single-column. */

/* The 30-day promise — the page's one artifact. Same surface + lift as the
   /connect connector-URL card (ij-connect-card-hero). */
.ij-refund-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    margin-bottom: 14px;
}

.ij-refund-hero-text {
    flex: 1;
    /* 320 drives the wrap point next to the CTA column; the 100% cap keeps the
       text from forcing 2px of horizontal scroll inside a 375px viewport. */
    min-width: min(320px, 100%);
}

.ij-refund-hero-title.mud-typography {
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin-bottom: 8px;
}

.ij-refund-hero-body.mud-typography {
    color: var(--mud-palette-text-secondary);
    line-height: 1.6;
}

.ij-refund-hero-action {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.ij-refund-hero-cta.mud-button-root {
    text-transform: none;
    border-radius: 9px;
}

.ij-refund-hero-caption.mud-typography {
    color: var(--mud-palette-text-secondary);
}

/* The three facts people scan for, as quiet pills under the hero. */
.ij-refund-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.ij-refund-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78125rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 980px;
    padding: 6px 13px;
}

.ij-refund-check.mud-icon-root {
    flex: none;
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: var(--mud-palette-success);
}

.ij-refund-cross.mud-icon-root {
    flex: none;
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: var(--mud-palette-text-secondary);
}

/* Policy prose left, sticky short-version rail right — /connect 13B numbers. */
.ij-refund-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.ij-refund-prose {
    min-width: 0;
}

.ij-refund-rail {
    position: sticky;
    top: 20px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    padding: 20px;
}

.ij-refund-rail-title.mud-typography {
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 8px;
}

.ij-refund-rail-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 9px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.ij-refund-rail-rows .ij-refund-rail-row:last-child {
    border-bottom: none;
}

.ij-refund-rail-row .mud-icon-root {
    margin-top: 2px;
}

/* The one negative reads quieter than the six reassurances, but stays visible. */
.ij-refund-rail-row-neg {
    color: var(--mud-palette-text-secondary);
}

.ij-refund-rail-howto {
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 6px;
    padding-top: 14px;
}

.ij-refund-rail-howto-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 7px;
}

.ij-refund-rail-howto-body.mud-typography {
    color: var(--mud-palette-text-secondary);
    line-height: 1.55;
}

.ij-refund-rail-smallprint {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 14px;
    padding-top: 13px;
    font-size: 0.71875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.ij-refund-shield.mud-icon-root {
    flex: none;
    font-size: 13px;
    width: 13px;
    height: 13px;
    margin-top: 1px;
    color: var(--mud-palette-text-secondary);
}

/* Collapse to one column below 900px (same break as /connect): prose first,
   short version reflows beneath it, no longer sticky. */
@media (max-width: 900px) {
    .ij-refund-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .ij-refund-rail {
        position: static;
    }
}

/* ═══════════════════════════════════════
   FAQ — 1A grouped rows + rail (Canvas-9)
═══════════════════════════════════════ */

/* Full-gutter workspace like /connect and /refund-policy: grouped FAQ rows in the
   left grid column, a sticky rail right with the topic index and the sign-up card
   the route never had. */

.ij-faq-subtitle.mud-typography {
    color: var(--mud-palette-text-secondary);
}

.ij-faq-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.ij-faq-list-col {
    min-width: 0;
}

.ij-faq-rail {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ij-faq-rail-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    padding: 18px 20px;
}

.ij-faq-toc-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
}

.ij-faq-toc-list {
    display: flex;
    flex-direction: column;
}

.ij-faq-toc-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.ij-faq-toc-list a:last-child {
    border-bottom: none;
}

.ij-faq-toc-list a:hover {
    color: var(--mud-palette-primary);
}

.ij-faq-toc-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* The sign-up card gets the one lift on the page — same shadow as the /connect
   connector-URL card and the /refund-policy hero. */
.ij-faq-cta {
    padding: 20px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}

.ij-faq-cta-title {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 12px;
}

.ij-faq-facts {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 16px;
}

.ij-faq-fact {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
}

.ij-faq-check.mud-icon-root {
    flex: none;
    font-size: 14px;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    color: var(--mud-palette-success);
}

.ij-faq-cta-btn.mud-button-root {
    text-transform: none;
    border-radius: 9px;
}

.ij-faq-cta-caption {
    font-size: 0.71875rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 10px;
}

/* Collapse to one column below 900px (same break as /connect): rows first, the
   rail reflows beneath them, no longer sticky. */
@media (max-width: 900px) {
    .ij-faq-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .ij-faq-rail {
        position: static;
    }
}

/* ═══════════════════════════════════════
   LEGAL — Profile dialog + You page
═══════════════════════════════════════ */

/* Apple neutral grey — matches TextSecondary in both themes */
.ij-legal-text {
    color: var(--mud-palette-text-secondary) !important;
}

/* Subtle hover on the caption link in ProfileDialog */
.ij-legal-link {
    opacity: 0.6;
    transition: opacity 0.15s;
}

.ij-legal-link:hover {
    opacity: 1;
}

/* Profile-menu settings rows (design 11A): icon · label · current value · chevron.
   Plain buttons so the whole row is the menu activator. */
.ij-menu-rows {
    padding: 4px 0;
}

.ij-menu-row {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 44px;
    padding: 11px 16px;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s;
}

.ij-menu-row:hover {
    background: var(--mud-palette-action-default-hover);
}

.ij-menu-row-icon {
    font-size: 17px !important;
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}

.ij-menu-row-label {
    flex: 1;
    font-size: 13.5px;
}

.ij-menu-row-value {
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.ij-menu-row-chevron {
    font-size: 13px !important;
    color: var(--mud-palette-text-secondary);
    opacity: 0.7;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* Chevron points down while the accordion is open */
.ij-menu-row-chevron-open {
    transform: rotate(90deg);
}

/* Inline accordion beneath a settings row (design 11A rev. 2): inset
   background-gray panel, one 40px row per option, hairline between rows,
   current option 600-weight with a primary check. No floating popovers. */
.ij-menu-accordion-panel {
    margin: 2px 16px 10px 16px;
    background: var(--mud-palette-background-gray);
    border-radius: 11px;
    overflow: hidden;
}

.ij-menu-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.ij-menu-option:hover {
    background: var(--mud-palette-action-default-hover);
}

.ij-menu-option + .ij-menu-option {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.ij-menu-option-current {
    font-weight: 600;
}

.ij-menu-option-check {
    font-size: 16px !important;
    color: var(--mud-palette-primary);
    flex-shrink: 0;
}

/* iOS Settings-style disclosure row on the You page */
.ij-legal-row {
    display: block;
    border-radius: 10px;
    transition: background-color 0.15s;
}

.ij-legal-row:hover {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
}

.ij-legal-divider {
    height: 1px;
    background-color: var(--mud-palette-divider);
    margin-left: 16px;
    margin-right: 16px;
}

/* ═══════════════════════════════════════
   RECENT NEWS LIST
═══════════════════════════════════════ */

.ij-news-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ij-news-list > li + li {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.ij-news-item {
    display: block;
    padding: 11px 12px;
    margin: 0 -12px; /* bleed hover to the card edge */
    border-radius: 12px;
    text-decoration: none;
    transition: background-color 0.15s;
}

.ij-news-item:hover {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent);
}

.ij-news-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
}

.ij-news-date {
    font-size: 0.6875rem; /* 11px */
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.ij-news-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--mud-palette-text-disabled, var(--mud-palette-text-secondary));
    opacity: 0.6;
}

.ij-news-ago {
    font-size: 0.6875rem; /* 11px */
    color: var(--mud-palette-text-disabled, var(--mud-palette-text-secondary));
    opacity: 0.8;
}

.ij-news-headline {
    display: block;
    font-size: 0.84375rem; /* ~13.5px */
    font-weight: 500;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
    text-wrap: pretty;
}

/* ═══════════════════════════════════════
   BOTTOM TAB BAR (mobile)
═══════════════════════════════════════ */

.footer-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-grow: 1;
    padding: 8px 4px 6px;
    gap: 3px;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.footer-nav-item:hover {
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.footer-nav-item.footer-nav-active {
    color: var(--mud-palette-primary);
}

.footer-nav-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
}

/* ═══════════════════════════════════════
   SIDEBAR / DRAWER
═══════════════════════════════════════ */

/* Drawer container */
.mud-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
    box-shadow: none !important;
}

/* Nav menu padding — insets items so border-radius has breathing room */
.mud-navmenu {
    padding: 8px !important;
}

/* ── Nav items: shared ─────────────────────────────── */

.mud-nav-link {
    border-radius: 10px !important;
    padding: 8px 12px !important;
    transition: background 0.15s, color 0.15s !important;
}

.mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-color: color-mix(
        in srgb,
        var(--mud-palette-text-primary) 6%,
        transparent
    ) !important;
}

/* ── Active state — Apple pill style ───────────────── */

/* Remove MudBlazor's default right-border indicator */
.mud-nav-link.active:not(.mud-nav-link-disabled) {
    border-inline-end: none !important;
    background-color: color-mix(
        in srgb,
        var(--mud-palette-primary) 10%,
        transparent
    ) !important;
    color: var(--mud-palette-primary) !important;
}

.mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon,
.mud-nav-link.active:not(.mud-nav-link-disabled) .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

/* ── Mini mode: icon on top, label below, centered ── */

.youtube-mini-drawer .mud-nav-link {
    flex-direction: column !important;
    padding: 10px 4px !important;
    justify-content: center !important;
    align-items: center !important;
    height: auto !important;
    width: 72px !important;
    margin: 2px auto !important;
}

.youtube-mini-drawer .mud-nav-link-icon.mud-nav-link-icon-default {
    margin-inline-end: 0 !important;
    margin-bottom: 3px !important;
    width: auto !important;
    display: flex !important;
    justify-content: center !important;
}

/* Override MudBlazor's mini-mode label hiding. Through 9.4 that was display:none;
   since 9.9 it is the visually-hidden pattern (position:absolute + clip/clip-path
   + a 1px box), so every property of that pattern must be neutralized here —
   display/opacity alone leave the label present but clipped to one pixel. */
.youtube-mini-drawer .mud-nav-link-text {
    display: block !important;
    opacity: 1 !important;
    position: static !important;
    clip: auto !important;
    clip-path: none !important;
    height: auto !important;
    overflow: visible !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Hide the expand chevron in mini mode (no room for it) */
.youtube-mini-drawer .mud-nav-group-expand-icon {
    display: none !important;
}

/* ── "You" nav link: render user avatar in the icon slot ─── */

.ij-you-nav-link .mud-nav-link-text {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
}

.ij-you-nav-avatar {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    flex-shrink: 0;
}

/* Mini mode: stack avatar above label like other icon-on-top items */
.youtube-mini-drawer .ij-you-nav-link .mud-nav-link-text {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px;
}

/* ═══════════════════════════════════════
   RESPONSIVE — hide sidebar on mobile + tablet
   Boundary matches the top-bar desktop chrome (d-md-*, 960px) and the bottom
   tab bar (d-md-none) so there is no "no-navigation" gap between 600–960px.
═══════════════════════════════════════ */

@media (max-width: 959.95px) {
    .mud-drawer {
        display: none !important;
    }

    .mud-main-content {
        margin-left: 0 !important;
        /* Clear the fixed bottom tab bar (+ home indicator) so the last rows of
           pages that don't use .ij-page-content aren't hidden behind it. */
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ═══════════════════════════════════════
   PAGE CONTENT — shared padding utility
═══════════════════════════════════════ */

.ij-page-content {
    padding: 32px 32px calc(80px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 599.95px) {
    .ij-page-content {
        padding: 20px 16px calc(80px + env(safe-area-inset-bottom, 0px));
    }
}

/* ═══════════════════════════════════════
   AUTOFILL — override browser background
═══════════════════════════════════════ */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    box-shadow: 0 0 0 40px var(--mud-palette-surface) inset !important;
    -webkit-text-fill-color: var(--mud-palette-text-primary) !important;
    border-color: var(--mud-palette-lines-inputs) !important;
}

/* ═══════════════════════════════════════
   RATIO — hover edit button
═══════════════════════════════════════ */

.ij-hover-cell .ij-hover-icon {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ij-hover-cell:hover .ij-hover-icon {
    opacity: 1;
}

/* ═══════════════════════════════════════
   STOCK VIEW — section layout
═══════════════════════════════════════ */

.sv-section {
    margin-top: 48px;
}

.sv-section:first-child {
    margin-top: 0;
}

.sv-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.sv-section-header--spaced {
    margin-top: 32px;
}

/* Notes & Comments (19A) moved to ComponentLibrary/wwwroot/css/stock-comments.css —
   component CSS belongs with the component, and the section was rewritten
   wholesale. .sv-comments-refresh-pill below stays: it is host chrome. */


.ij-info-icon {
    color: var(--mud-palette-text-secondary);
}

.sv-notfound {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 16px;
    gap: 4px;
}

.sv-notfound .ij-btn-tinted {
    text-decoration: none;
    margin-top: 12px;
}

/* ═══════════════════════════════════════
   STOCK HERO
═══════════════════════════════════════ */

.sv-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 8px 0 24px;
    border-bottom: 0.5px solid var(--mud-palette-divider);
    margin-bottom: 24px;
}

.sv-hero-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.sv-hero-avatar {
    flex-shrink: 0;
}

.sv-hero-name-block {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sv-hero-name {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sv-hero-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.sv-hero-ticker-pill {
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 980px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* #1503 M3b, Canvas-20 #1d: the earnings chip beside the ticker pill — same height
   (3px vertical padding on 11.5px/600 text), radius 999px. Three treatments that
   mirror /calendar's own pills (.ij-cal-pill--scheduled/--reported/--estimated in
   calendar.css) so the two surfaces read the same: indigo tint + calendar glyph for an
   announced date, success tint + check (+ external arrow) once reported, dashed
   italic with no fill and no glyph for an estimate. The amber fourth variant is the
   Layer 3 tie-in ("Your numbers predate Q2") — --mud-palette-warning is the app's
   amber, the same hue the desk's stale card uses; there is no --ij-amber token. */
.sv-hero-earnings-chip {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    /* 18px + 2×3px padding = the ticker pill's own 24px, measured. */
    line-height: 18px;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.sv-hero-earnings-chip:hover {
    text-decoration: none;
    filter: brightness(1.08);
}

.sv-hero-earnings-chip--scheduled {
    color: var(--ij-event);
    background: var(--ij-event-tint);
}

.sv-hero-earnings-chip--reported {
    color: var(--mud-palette-success);
    background: rgba(61, 203, 108, 0.12);
}

.sv-hero-earnings-chip--stale {
    color: var(--mud-palette-warning);
    background: rgba(255, 181, 69, 0.12);
    font-weight: 500;
}

.sv-hero-earnings-glyph.mud-icon-root {
    width: 12px;
    height: 12px;
}

.sv-hero-earnings-glyph--out.mud-icon-root {
    width: 11px;
    height: 11px;
    opacity: 0.7;
}

.sv-hero-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 8px;
}

.sv-hero-price {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--mud-palette-text-primary);
    line-height: 1.1;
}

.sv-hero-change {
    font-size: 15px;
    font-weight: 600;
}

.sv-hero-change--pos {
    color: var(--mud-palette-success);
}

.sv-hero-change--neg {
    color: var(--mud-palette-error);
}

.sv-hero-price-caption {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

/* Verdict summary card (right of the hero) */
.sv-hero-verdict-card {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
}

.sv-hero-verdict-pill {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 980px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sv-hero-verdict-pill--pos {
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    color: var(--mud-palette-success);
}

.sv-hero-verdict-pill--neg {
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    color: var(--mud-palette-error);
}

.sv-hero-verdict-pill--neutral {
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
}

.sv-hero-verdict-text {
    display: flex;
    flex-direction: column;
    text-align: right;
    min-width: 0;
}

.sv-hero-verdict-upside {
    font-size: 15px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1.2;
}

.sv-hero-verdict-fair {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.3;
}

@media (max-width: 599.95px) {
    .sv-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .sv-hero-name {
        font-size: 22px;
        max-width: calc(100vw - 104px);
    }

    .sv-hero-price {
        font-size: 26px;
    }

    /* Verdict card spans the row and reads left-aligned on phones. */
    .sv-hero-verdict-card {
        width: 100%;
        justify-content: space-between;
    }

    .sv-hero-verdict-text {
        text-align: right;
    }
}

/* ═══════════════════════════════════════
   PRICE CHART CARD (hero area)
═══════════════════════════════════════ */

.sv-chart-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 18px;
    padding: 18px 20px;
    margin-bottom: 24px;
}

.sv-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 12px;
}

.sv-chart-title-block {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    min-width: 0;
}

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

.sv-chart-range-summary {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.sv-chart-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.sv-chart-tab {
    border: none;
    background: transparent;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.sv-chart-tab:hover {
    color: var(--mud-palette-text-primary);
}

.sv-chart-tab--active {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
}

.sv-chart-svg {
    display: block;
    width: 100%;
    height: 150px;
    overflow: visible;
}

.sv-chart-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.sv-chart-area {
    stroke: none;
}

.sv-chart-svg--up .sv-chart-line {
    stroke: var(--mud-palette-success);
}

.sv-chart-svg--up .sv-chart-area {
    fill: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
}

.sv-chart-svg--down .sv-chart-line {
    stroke: var(--mud-palette-error);
}

.sv-chart-svg--down .sv-chart-area {
    fill: color-mix(in srgb, var(--mud-palette-error) 14%, transparent);
}

.sv-chart-refline {
    stroke: var(--mud-palette-secondary);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.85;
    vector-effect: non-scaling-stroke;
}

.sv-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    color: var(--mud-palette-text-secondary);
    font-size: 14px;
}

.sv-chart-refnote {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.sv-chart-refswatch {
    flex-shrink: 0;
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: var(--mud-palette-secondary);
}

.sv-chart-reftext {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

/* ═══════════════════════════════════════
   TWO-COLUMN BODY + RIGHT RAIL
═══════════════════════════════════════ */

.sv-body-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    grid-template-areas:
        "main rail"
        "comments rail";
    gap: 24px;
    align-items: start;
}

.sv-main,
.sv-rail,
.sv-comments {
    min-width: 0;
}

.sv-main {
    grid-area: main;
}

.sv-rail {
    grid-area: rail;
}

.sv-comments {
    grid-area: comments;
}

.sv-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sv-rail-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 18px;
    padding: 18px 20px;
}

.sv-rail-card-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--mud-palette-text-primary);
    margin-bottom: 12px;
}

/* AI card — subtle indigo tint to promote the feature */
.sv-ai-card {
    background: color-mix(in srgb, var(--mud-palette-secondary) 6%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-secondary) 22%, var(--mud-palette-lines-default));
}

.ij-ai-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--mud-palette-text-primary);
}

.ij-ai-card-title .mud-icon-root {
    color: var(--mud-palette-secondary);
}

.ij-ai-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.ij-ai-chip {
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    border-radius: 980px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

.ij-ai-chip:hover:not(:disabled) {
    border-color: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary);
}

.ij-ai-chip:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Key stats */
.sv-keystat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 14px;
}

.sv-keystat-label {
    color: var(--mud-palette-text-secondary);
}

.sv-keystat-value {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.sv-keystat-value.pos {
    color: var(--mud-palette-success);
}

.sv-keystat-value.neg {
    color: var(--mud-palette-error);
}

/* Profile card */
.sv-profile-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--mud-palette-divider);
    font-size: 14px;
}

.sv-profile-label {
    color: var(--mud-palette-text-secondary);
}

.sv-profile-value {
    font-weight: 600;
    text-align: right;
}

.sv-profile-link {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.sv-profile-about {
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--mud-palette-divider);
}

.sv-profile-description {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
}

/* Collapse to one column below the shell's mobile breakpoint (MudBlazor md =
   960px) so the two-column body and the desktop chrome appear/disappear together. */
@media (max-width: 959.95px) {
    .sv-body-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "rail"
            "comments";
    }
}

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

@media (max-width: 599.95px) {
    .sv-section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .sv-dcf-mobile-hidden {
        display: none;
    }
}

/* ═══════════════════════════════════════
   LINK BUTTON — text-only action
═══════════════════════════════════════ */

.ij-link-btn {
    background: none;
    border: none;
    color: var(--mud-palette-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    transition: opacity 0.15s;
}

.ij-link-btn:hover {
    opacity: 0.75;
}

.sv-see-all {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* ═══════════════════════════════════════
   ACTION BUTTONS — Apple pill style
═══════════════════════════════════════ */

/* Compact-sheet primary ACTION — inline text, per the dialog rules (the filled
   pill belongs to page-level CTAs, never a compact sheet's footer). Mirrors the
   reference sheets' save buttons (.urd-btn-save). */
.ij-btn-text-primary {
    font-size: 15px;
    font-weight: 600;
    color: var(--mud-palette-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 0;
}

.ij-btn-primary {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--mud-palette-primary);
    color: #fff;
    border: none;
    border-radius: 980px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s;
}

.ij-btn-primary:hover {
    opacity: 0.88;
}

.ij-btn-tinted {
    display: flex;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
    border: none;
    border-radius: 980px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.ij-btn-tinted:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
}

.ij-btn-danger {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--mud-palette-error);
    color: #fff;
    border: none;
    border-radius: 980px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s;
}

.ij-btn-danger:hover {
    opacity: 0.88;
}

/* ═══════════════════════════════════════
   RATIO PILLS
═══════════════════════════════════════ */

.ij-ratio-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.ij-ratio-pill.pos {
    color: var(--mud-palette-success);
    background: rgba(50, 215, 75, 0.12);
}

.ij-ratio-pill.neg {
    color: var(--mud-palette-error);
    background: rgba(255, 69, 58, 0.12);
}

/* ═══════════════════════════════════════
   RATIO TREND SUMMARY (compact RATIO · TREND · TTM)
═══════════════════════════════════════ */

.ij-ratios-trend-caption {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.ij-ratio-summary {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    overflow: hidden;
}

.ij-ratio-summary-head,
.ij-ratio-summary-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr) minmax(72px, auto);
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.ij-ratio-summary-head {
    background: var(--mud-palette-background-gray);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.ij-ratio-summary-row {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.ij-ratio-summary-ttm-col {
    text-align: right;
    justify-self: end;
}

.ij-ratio-summary-label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.ij-ratio-summary-trend {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ij-sparkline {
    flex-shrink: 0;
    width: 80px;
    height: 26px;
}

.ij-sparkline polyline {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.ij-sparkline--up polyline {
    stroke: var(--mud-palette-success);
}

.ij-sparkline--flat polyline {
    stroke: var(--mud-palette-text-secondary);
}

.ij-ratio-summary-caption {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

/* ── Per-user ratio thresholds ── */

/* Label cell becomes label + "green ≥ 5%" caption; the label span keeps the
   cell's 600 weight, the caption drops back down. */
.ij-ratio-summary-label-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ij-ratio-threshold-caption {
    font-size: 11px;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.ij-ratio-threshold-caption.custom {
    color: var(--mud-palette-primary);
}

/* "N custom" chip in the section header — primary-tinted so a re-graded stock
   never silently reads as the house grade. Opens the same dialog. */
.ij-ratio-custom-chip {
    border: none;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
    border-radius: 980px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.1s;
}

.ij-ratio-custom-chip:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
}

.ij-ratio-tune-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 980px;
    border: 1px solid var(--mud-palette-lines-default);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition:
        color 0.1s,
        border-color 0.1s;
}

.ij-ratio-tune-btn:hover {
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-text-secondary);
}

/* ── Expert mode (account-wide): the value IS the control ── */

/* Borderless ··· header button — the full dialog's only entry point in expert. */
.ij-ratio-more-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 980px;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: color 0.1s;
}

.ij-ratio-more-btn:hover {
    color: var(--mud-palette-text-primary);
}

/* Graded value as a control: keeps the verdict color, carries a hairline
   dashed underline instead of the pill chrome. */
.ij-ratio-value-btn {
    border: none;
    background: none;
    padding: 0 0 1px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
    transition: border-color 0.1s;
}

.ij-ratio-value-btn:hover {
    border-bottom-color: currentColor;
}

.ij-ratio-value-btn.pos {
    color: var(--mud-palette-success);
}

.ij-ratio-value-btn.neg {
    color: var(--mud-palette-error);
}

/* Inline threshold editor, overlaid on the row's right edge. */
.ij-ratio-summary-row {
    position: relative;
}

.ij-ratio-inline-editor {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-primary);
    border-radius: 12px;
    padding: 6px 8px 6px 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.ij-ratio-inline-label {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.ij-ratio-inline-input {
    width: 54px;
    border: none;
    background: var(--mud-palette-background-gray);
    border-radius: 7px;
    padding: 5px 7px;
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    text-align: right;
    outline: none;
    appearance: textfield;
    -moz-appearance: textfield;
}

.ij-ratio-inline-input::-webkit-inner-spin-button,
.ij-ratio-inline-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ij-ratio-inline-set {
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
    border-radius: 8px;
    padding: 5px 10px;
    transition: opacity 0.1s;
}

.ij-ratio-inline-set:hover {
    opacity: 0.85;
}

.ij-ratio-inline-default {
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    background: none;
    padding: 5px 2px;
    transition: color 0.1s;
}

.ij-ratio-inline-default:hover {
    color: var(--mud-palette-text-primary);
}

/* One-time offer strip after the third saved override. */
.ij-ratio-expert-offer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 12.5px;
    color: var(--mud-palette-text-primary);
    margin-bottom: 12px;
}

.ij-ratio-expert-offer-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.ij-ratio-expert-offer-dismiss {
    color: var(--mud-palette-text-secondary);
}

/* "My Data" — the user's own custom metrics (#892).
   Neutral on purpose: ratio pills are green/red against a threshold, but a custom
   metric has no threshold to judge, so a value here makes no good/bad claim. */
.ij-my-data-value {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

/* Growth (YoY) stat tiles */
.ij-growth-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.ij-growth-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-background-gray);
}

.ij-growth-tile-label {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.ij-growth-tile-value {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.ij-growth-tile-value.pos {
    color: var(--mud-palette-success);
}

.ij-growth-tile-value.neg {
    color: var(--mud-palette-error);
}

@media (max-width: 599.95px) {
    .ij-growth-tiles {
        grid-template-columns: 1fr;
    }

    .ij-ratio-summary-head,
    .ij-ratio-summary-row {
        gap: 8px;
        padding: 10px 12px;
    }

    .ij-sparkline {
        width: 56px;
    }
}

/* ═══════════════════════════════════════
   TOOLBAR — Ask AI button
═══════════════════════════════════════ */

.ij-ask-ai-btn {
    font-size: 13px;
    padding: 5px 12px;
    height: 30px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════
   AI CHAT PANEL — right-side slide-in
═══════════════════════════════════════ */

/* Main content shift when AI panel is open (desktop only) */
@media (min-width: 600px) {
    .ij-main-shifted .mud-main-content,
    .mud-main-content.ij-main-shifted {
        margin-right: 380px;
    }
}

/* Panel shell */
.ij-ai-panel {
    position: fixed;
    top: 64px;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 100vw;
    z-index: 1150;
    background-color: var(--mud-palette-surface);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-left: 1px solid var(--mud-palette-lines-default);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    display: flex;
    flex-direction: column;
}

.ij-ai-panel--open {
    transform: translateX(0);
}

/* Header */
.ij-ai-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 12px 16px;
    flex-shrink: 0;
    height: 64px;
}

.ij-ai-panel-title {
    display: flex;
    align-items: center;
}

/* Message list — flex child, fills remaining space */
.ij-ai-panel-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ij-ai-panel-messages::-webkit-scrollbar {
    display: none;
}

/* Empty / unavailable states inside messages area */
.ij-ai-panel-empty,
.ij-ai-panel-unavailable {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 24px;
}

/* User bubble — right-aligned, primary colour */
.ij-ai-msg-user {
    display: block;
    width: fit-content;
    max-width: 82%;
    margin-left: auto;
    margin-bottom: 10px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-radius: 16px 16px 4px 16px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Assistant bubble — left-aligned, subtle tint */
.ij-ai-msg-assistant {
    display: block;
    max-width: 92%;
    margin-right: auto;
    margin-bottom: 10px;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    border-radius: 16px 16px 16px 4px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    color: var(--mud-palette-text-primary);
}

/* Markdown content inside assistant bubble */
.ij-ai-msg-assistant p {
    margin: 0 0 8px 0;
}
.ij-ai-msg-assistant p:last-child {
    margin-bottom: 0;
}
.ij-ai-msg-assistant ul,
.ij-ai-msg-assistant ol {
    margin: 4px 0 8px 0;
    padding-left: 20px;
}
.ij-ai-msg-assistant li {
    margin-bottom: 2px;
}
.ij-ai-msg-assistant strong {
    font-weight: 600;
}
.ij-ai-msg-assistant code {
    font-family: monospace;
    font-size: 12px;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
    border-radius: 4px;
    padding: 1px 5px;
}
.ij-ai-msg-assistant pre {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
    border-radius: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    margin: 6px 0;
}
.ij-ai-msg-assistant pre code {
    background: none;
    padding: 0;
}
.ij-ai-msg-assistant h1,
.ij-ai-msg-assistant h2,
.ij-ai-msg-assistant h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 8px 0 4px 0;
}

/* ── AI empty state suggestion groups ── */

.ij-ai-suggestion-group {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.ij-ai-suggestion-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    min-width: 80px;
    text-align: right;
    justify-content: flex-end;
}

/* ── Command log entries in chat ── */

.ij-cmd-msg-input {
    display: block;
    width: fit-content;
    max-width: 82%;
    margin-left: auto;
    margin-bottom: 4px;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
    color: var(--mud-palette-text-primary);
    border-radius: 16px 16px 4px 16px;
    padding: 8px 12px;
    font-size: 13px;
    font-family: monospace;
    line-height: 1.4;
}

.ij-cmd-msg-result {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 12px;
    padding: 0 2px;
}

/* ── Slash command popup (above AI footer) ── */

.ij-slash-popup {
    flex-shrink: 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: none;
}

.ij-slash-popup::-webkit-scrollbar {
    display: none;
}

.ij-slash-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background-color 0.1s;
}

.ij-slash-item:hover,
.ij-slash-item--active {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent) !important;
}

.ij-slash-item-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-primary);
    flex-shrink: 0;
}

.ij-slash-item--active .ij-slash-item-icon {
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    color: var(--mud-palette-primary);
}

.ij-slash-item-body {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 8px;
}

.ij-slash-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.ij-slash-item-slug {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    font-family: monospace;
    flex-shrink: 0;
}

/* Input footer — flex child, grows with textarea */
.ij-ai-panel-footer {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
}

/* Native textarea wrapper */
.ij-ai-input-wrap {
    flex: 1;
    min-width: 0;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 8px 12px;
    transition: border-color 0.15s;
}

.ij-ai-input-wrap:focus-within {
    border-color: var(--mud-palette-primary);
}

.ij-ai-input-textarea {
    display: block;
    width: 100%;
    min-height: 24px;
    max-height: 120px;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    font-size: 14px;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    overflow-y: auto;
}

.ij-ai-input-textarea::placeholder {
    color: var(--mud-palette-text-disabled);
}

/* Mobile: full-width panel */
@media (max-width: 599.95px) {
    .ij-ai-panel {
        width: 100vw;
        border-left: none;
    }
}

/* ═══════════════════════════════════════
   COMMAND PALETTE — Spotlight-style overlay
═══════════════════════════════════════ */

/* Full-screen backdrop */
.ij-cmd-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 80px;
    animation: ij-cmd-fade-in 0.12s ease;
}

@keyframes ij-cmd-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Palette card */
.ij-cmd-palette {
    width: 560px;
    max-width: calc(100vw - 32px);
    background: var(--mud-palette-surface);
    border-radius: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    animation: ij-cmd-slide-in 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes ij-cmd-slide-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Input row */
.ij-cmd-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ij-cmd-input-icon {
    color: var(--mud-palette-text-secondary) !important;
    font-size: 20px !important;
    flex-shrink: 0;
}

.ij-cmd-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 15px;
    font-weight: 450;
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    caret-color: var(--mud-palette-primary);
}

.ij-cmd-input::placeholder {
    color: var(--mud-palette-text-disabled);
}

/* Clear button */
.ij-cmd-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: 50%;
    transition: color 0.15s;
}

.ij-cmd-clear:hover {
    color: var(--mud-palette-text-primary);
}

/* Results list */
.ij-cmd-results {
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
}

/* Individual command row */
.ij-cmd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 10px;
    border: none;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.1s;
    font-family: inherit;
}

.ij-cmd-item:hover,
.ij-cmd-item--active {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent) !important;
}

/* Icon badge */
.ij-cmd-item-icon-wrap {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-primary);
}

.ij-cmd-item--active .ij-cmd-item-icon-wrap {
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    color: var(--mud-palette-primary);
}

/* Text block */
.ij-cmd-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ij-cmd-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
}

.ij-cmd-item-desc {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.3;
}

/* Keyboard shortcut badge */
.ij-cmd-kbd {
    font-size: 11px;
    font-family: inherit;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 5px;
    padding: 2px 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Empty state */
.ij-cmd-empty {
    padding: 24px;
    text-align: center;
}

/* ═══════════════════════════════════════
   SNACKBAR — Custom toast design
   Left accent bar + circular icon badge
   Uses RenderFragment + :has() selector
═══════════════════════════════════════ */

/* Card container */
.mud-snackbar {
    border-radius: 14px !important;
    overflow: hidden;
    min-width: 300px;
    max-width: 420px;
    background: var(--mud-palette-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    padding: 0 !important;
}

/* Hide the default MudBlazor icon — we render our own */
.mud-snackbar .mud-snackbar-icon {
    display: none !important;
}

/* Content area: remove default padding, let ij-toast-body control it */
.mud-snackbar .mud-snackbar-content-message {
    padding: 0 !important;
    flex: 1;
}

/* Guard rail for raw Snackbar.Add(string) calls (the ShowError/ShowSuccess
   extensions are the convention): without an ij-toast body, MudBlazor's
   filled-severity text is WHITE — invisible on the surface background this
   design forces above — and the zeroed padding collapses the pill. Keep such
   toasts readable instead of blank (bit the Android sign-in card, #949). */
.mud-snackbar .mud-snackbar-content-message:not(:has(.ij-toast-body)) {
    padding: 12px 16px !important;
    color: var(--mud-palette-text-primary) !important;
}

/* Severity left accent via :has() */
.mud-snackbar:has(.ij-toast-normal) {
    border-left: 4px solid #4CAF50 !important;
}
.mud-snackbar:has(.ij-toast-error) {
    border-left: 4px solid var(--mud-palette-error) !important;
}
.mud-snackbar:has(.ij-toast-warning) {
    border-left: 4px solid var(--mud-palette-warning) !important;
}
.mud-snackbar:has(.ij-toast-info) {
    border-left: 4px solid var(--mud-palette-info) !important;
}

/* Custom toast body */
.ij-toast-body {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

/* Circular icon badge */
.ij-toast-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.ij-toast-normal .ij-toast-icon {
    background-color: #4CAF50;
}
.ij-toast-error .ij-toast-icon {
    background-color: var(--mud-palette-error);
}
.ij-toast-warning .ij-toast-icon {
    background-color: var(--mud-palette-warning);
}
.ij-toast-info .ij-toast-icon {
    background-color: var(--mud-palette-info);
}

/* Message text */
.ij-toast-message {
    font-size: 14px;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
}

/* ═══════════════════════════════════════
   HELP PAGE
═══════════════════════════════════════ */

.ij-help-page {
    padding-top: 3rem;
    padding-bottom: 5rem;
}

.ij-help-card {
    background: var(--mud-palette-surface);
    border-radius: 14px;
    padding: 20px;
}

.ij-help-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.ij-help-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ij-help-card-title {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.2px;
}

.ij-help-cmd-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ij-help-cmd-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.ij-help-cmd-slug {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    color: var(--mud-palette-text-primary);
    padding: 2px 7px;
    border-radius: 5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.ij-help-cmd-desc {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.ij-help-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ij-help-example {
    font-size: 12px;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    padding: 3px 9px;
    border-radius: 20px;
}

/* "With a parameter" subsection caption inside the merged Slash commands card (1A). */
.ij-help-subhead {
    margin: 16px 0 8px;
    font-size: 0.71875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* The Tab/Enter hints sit as the Slash-commands card footer (1A). */
.ij-help-hint {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 14px;
    padding-top: 12px;
}

.ij-help-hint span {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ij-help-shortcut-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ij-help-shortcut-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ij-help-shortcut-row span {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

/* The FAQ cross-link, demoted from a whole card to one quiet line (1A). */
.ij-help-faq-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 4px 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* ═══════════════════════════════════════
   DOCUMENT CHAT — message bubbles
═══════════════════════════════════════ */

.ij-chat-message {
    display: flex;
}

.ij-chat-message.ij-chat-message--user {
    justify-content: flex-end;
}

.ij-chat-message.ij-chat-message--assistant {
    justify-content: flex-start;
}

.ij-chat-message-content {
    white-space: pre-wrap;
    word-break: break-word;
}

/* ═══════════════════════════════════════
   RESEARCH — chat surface, composer, empty state, typing dots
═══════════════════════════════════════ */

.ij-chat-surface {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 240px;
    max-height: 480px;
    overflow-y: auto;
    padding: 4px;
    margin-bottom: 16px;
}

.ij-chat-bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 18px;
    line-height: 1.4;
}

.ij-chat-bubble--user {
    margin-left: auto;
    background: var(--mud-palette-primary);
    color: #fff;
}

.ij-chat-bubble--assistant {
    margin-right: auto;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 0.5px solid var(--mud-palette-divider);
}

.ij-chat-bubble__text {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.ij-chat-bubble__time {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    opacity: 0.7;
}

.ij-chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 16px;
    gap: 8px;
    margin: auto;
}

.ij-chat-empty__icon {
    color: var(--mud-palette-text-secondary);
    opacity: 0.5;
}

.ij-chat-empty__headline {
    font-size: 16px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin: 0;
}

.ij-chat-empty__body {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    max-width: 280px;
    margin: 0;
    line-height: 1.4;
}

.ij-chat-composer {
    display: flex;
    align-items: center;
    background: var(--mud-palette-surface);
    border: 0.5px solid var(--mud-palette-divider);
    border-radius: 999px;
    padding: 4px 4px 4px 16px;
    gap: 8px;
    transition: border-color 0.15s;
}

.ij-chat-composer:focus-within {
    border-color: var(--mud-palette-primary);
}

.ij-chat-composer__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 8px 0;
    font: inherit;
    color: var(--mud-palette-text-primary);
    min-width: 0;
}

.ij-chat-composer__input::placeholder {
    color: var(--mud-palette-text-secondary);
}

.ij-chat-composer__send {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s, background 0.15s;
    flex-shrink: 0;
}

.ij-chat-composer__send:disabled {
    background: color-mix(in srgb, var(--mud-palette-text-disabled) 60%, transparent);
    cursor: not-allowed;
}

.ij-chat-composer__send:not(:disabled):hover {
    opacity: 0.88;
}

.ij-chat-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.ij-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
}

.ij-typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mud-palette-text-secondary);
    animation: ij-typing 1.2s infinite ease-in-out;
}

.ij-typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.ij-typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes ij-typing {
    0%, 60%, 100% {
        opacity: 0.3;
        transform: translateY(0);
    }
    30% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

/* ═══════════════════════════════════════
   NOTES — empty state
═══════════════════════════════════════ */

.sv-notes-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 16px;
    gap: 6px;
}

.sv-notes-empty__icon {
    color: var(--mud-palette-text-secondary);
    opacity: 0.5;
}

.sv-notes-empty__headline {
    font-size: 15px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin: 0;
}

.sv-notes-empty__body {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    max-width: 280px;
    margin: 0;
    line-height: 1.4;
}

/* /admin/stocks/{id}/prices — admin stock prices viewer.
   These rules live in the global stylesheet (not scoped) because the back-link
   class is applied to MudLink and the Δ% color classes are applied to spans
   built via RenderFragment, neither of which receives Blazor scoped-CSS
   attributes. */

.ij-stock-prices-back.mud-typography {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    text-decoration: none;
}

.ij-stock-prices-back.mud-typography:hover {
    color: var(--mud-palette-text-primary);
    text-decoration: underline;
}

.ij-stock-prices-back .mud-icon-root {
    font-size: 1rem;
    color: inherit;
}

.ij-stock-prices-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin: 16px 0;
}

.ij-stock-prices-presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ij-stock-prices-pct-up {
    color: var(--mud-palette-success);
}

.ij-stock-prices-pct-down {
    color: var(--mud-palette-error);
}

.ij-stock-prices-pct-null {
    color: var(--mud-palette-text-secondary);
}

/* ═══════════════════════════════════════
   STOCK GRID SUMMARY — hover-revealed delete icon
═══════════════════════════════════════ */

.ij-stockgrid-delete-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: none;
}

.mud-button:hover .ij-stockgrid-delete-icon {
    display: block;
}


.sv-comments-refresh-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 12px;
    padding: 6px 14px;
    border: none;
    border-radius: 999px;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 120ms ease-out;
}

.sv-comments-refresh-pill:hover {
    background: var(--mud-palette-action-default-darken);
}

/* ===== Connect to Claude (/connect) and the subscription (/you/pro) ===== */
/* TWO PAGES SHARE THIS BLOCK — a change here changes both. They are the same kind
   of page (a procedure on the left, an argument on the right) sitting two rows
   apart in the same account area, so /you/pro reuses these class names verbatim
   rather than cloning them as .ij-bill-*. A duplicated rail is a rail that drifts,
   and non-drift is the whole point.

   Both wrap in .ij-page-content so the gutter matches every other content page
   (Watchlists, You, etc.); no max-width — full-bleed like their siblings, which
   keeps the two-column measure balanced instead of a 1040px block pinned
   hard-left against the pa-4 gutter (the earlier "too much on the left" look). */

/* Full-width hero — spans both grid columns; text capped for a comfortable
   reading measure while the grid below fills the content width. */
.ij-connect-hero {
    max-width: 760px;
    margin-bottom: 1.75rem;
}

/* Claude brand lockup — logomark + "Works with Claude". The clay (#D97757) is
   Claude's own brand colour, deliberately un-themed — the same single exception
   the shared ClaudeMark component documents. Everything else here uses tokens. */
.ij-connect-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #d97757;
}

/* The brand-neutral variant, for /you/pro. The clay above is Claude's colour and
   the one documented exception on /connect; it may not travel to a billing page,
   so the eyebrow and its mark take --ij-primary instead. The clay rule itself is
   untouched — this is an added variant, never an override. */
.ij-connect-eyebrow--brand {
    color: var(--ij-primary);
}

/* Stands in for ClaudeMark at the same 15px, filled with whatever colour the
   eyebrow is carrying — so the mark can never disagree with the text beside it. */
.ij-connect-eyebrow-mark {
    flex: none;
    width: 15px;
    height: 15px;
    border-radius: var(--ij-radius);
    background: currentColor;
}

/* Two-column layout: setup (left) + sticky capabilities panel (right) */
.ij-connect-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.ij-connect-setup {
    min-width: 0;
}

/* Collapse to one column below 900px — capabilities panel reflows beneath the
   setup column (the 13A single-column stack), no longer sticky. */
@media (max-width: 900px) {
    .ij-connect-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.ij-connect-title {
    font-weight: 600;
    letter-spacing: -0.02em;
}

.ij-connect-heading {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Directory callout — info-tinted */
.ij-connect-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-info) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-info) 22%, transparent);
}

.ij-connect-callout .mud-icon-root {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--mud-palette-info);
}

/* Prerequisites — check-chips */
.ij-connect-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ij-connect-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 980px;
    padding: 0.35rem 0.8rem;
}

.ij-connect-chip .mud-icon-root {
    font-size: 1rem;
    color: var(--mud-palette-success);
}

/* Surface cards (hero connector URL + Claude Code command) */
.ij-connect-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    padding: 1.125rem;
}

.ij-connect-card-hero {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}

.ij-connect-url {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.3125rem 0.3125rem 0.3125rem 0.9375rem;
    border-radius: 11px;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
}

.ij-connect-url-text {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-primary);
}

/* Starter-prompt text (#870/15A) — prose, so it wraps instead of ellipsizing */
.ij-connect-prompt-text {
    flex: 1;
    min-width: 0;
    font-size: 0.9375rem;
    color: var(--mud-palette-text-primary);
}

/* ── 15A: "Try these first" section ─────────────────────────────────────── */

.ij-connect-tryfirst {
    margin-top: 4px;
}

.ij-connect-tryfirst-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

.ij-connect-tryfirst-title {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.ij-connect-tryfirst-rule {
    flex: 1;
    height: 1px;
    background: var(--mud-palette-lines-default);
}

.ij-connect-prompt-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 11px 14px;
    margin-bottom: 8px;
}

.ij-connect-open-claude {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    text-decoration: none;
    white-space: nowrap;
}

.ij-connect-open-claude:hover {
    text-decoration: underline;
}

.ij-connect-open-claude .mud-icon-root {
    font-size: 0.8125rem;
}

.ij-connect-prompt-copy {
    flex: none;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 599.95px) {
    .ij-connect-prompt-row {
        flex-wrap: wrap;
    }

    .ij-connect-prompt-row .ij-connect-prompt-text {
        flex-basis: 100%;
    }
}

/* ── 15A: connected banner + setup disclosure ───────────────────────────── */

.ij-connect-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: color-mix(in srgb, var(--mud-palette-success) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 30%, transparent);
    border-radius: 12px;
    padding: 11px 14px;
}

.ij-connect-banner > .mud-icon-root {
    flex: none;
    color: var(--mud-palette-success);
}

.ij-connect-banner-text {
    flex: 1;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.ij-connect-banner-text strong {
    color: var(--mud-palette-text-primary);
    margin-right: 4px;
}

.ij-connect-collapse-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 18px;
    padding: 13px 0 16px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.ij-connect-collapse-row > span {
    flex: 1;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.ij-connect-collapse-row > .mud-icon-root {
    flex: none;
    color: var(--mud-palette-text-secondary);
}

.ij-connect-copy-btn {
    flex-shrink: 0;
}

/* Setup paths — segmented control */
.ij-connect-seg {
    display: flex;
    gap: 3px;
    padding: 3px;
    background: var(--mud-palette-background-grey);
    border-radius: 11px;
}

.ij-connect-seg-btn {
    flex: 1;
    appearance: none;
    border: none;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.5rem;
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.ij-connect-seg-btn.ij-active {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Numbered steps (web & desktop panel) */
.ij-connect-steps {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ij-connect-step {
    display: flex;
    align-items: flex-start;
    gap: 0.8125rem;
    padding: 0.5rem 0.25rem;
}

.ij-connect-step-badge {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}

.ij-connect-step-text {
    padding-top: 2px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
}

.ij-connect-settings-btn {
    text-transform: none;
    border-color: var(--mud-palette-lines-default);
    border-radius: 10px;
}

/* Sticky capabilities panel (right column) */
.ij-connect-panel {
    position: sticky;
    top: 20px;
}

.ij-connect-panel-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    padding: 1.25rem 1.375rem;
}

/* Capabilities — stacked icon rows separated by dividers */
.ij-connect-cap-list {
    display: flex;
    flex-direction: column;
}

.ij-connect-cap-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6875rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.ij-connect-cap-row:first-child {
    border-top: none;
    padding-top: 0.25rem;
}

.ij-connect-cap-icon {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ij-cap-color) 15%, transparent);
}

.ij-connect-cap-icon .mud-icon-root {
    font-size: 1.05rem;
    color: var(--ij-cap-color);
}

.ij-connect-cap-text {
    padding-top: 5px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
}

/* Security note (lock + text) + docs link, inside the panel below the caps */
.ij-connect-security {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.ij-connect-security .mud-icon-root {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 0.95rem;
    color: var(--mud-palette-text-disabled);
}

.ij-connect-docs-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1rem;
}

.ij-connect-docs-link .mud-icon-root {
    font-size: 0.95rem;
}

/* Below 900px the panel drops beneath the setup column — release the sticky. */
@media (max-width: 900px) {
    .ij-connect-panel {
        position: static;
    }
}

/* Fill the available width — used for flex rows inside MudListItem (e.g. admin broadcast drafts). */
.ij-fill-width {
    width: 100%;
}

/* ═══════════════════════════════════════
   MOBILE CONTENT TWEAKS (#407)
═══════════════════════════════════════ */

/* Watchlist single-view empty placeholder — large on desktop, but content-sized
   on phones so it doesn't eat the whole screen before a stock is selected. */
.ij-wl-stock-placeholder {
    height: 75vh;
}

@media (max-width: 599.95px) {
    .ij-wl-stock-placeholder {
        height: auto;
    }
}

/* YouView profile: stack the first/last name fields vertically on phones instead
   of cramming two outlined fields beside the avatar. */
@media (max-width: 599.95px) {
    .ij-you-name-row {
        flex-direction: column;
    }
}

/* #784: /you is a settings column, not a full-bleed page. Cap the reading
   measure and centre it on wide viewports — before this, its rows spanned the
   whole content area (~1830px at 1440) with each chevron ~1800px from its
   label. Same title treatment as the WatchLists/News page headings. */
.ij-you-page {
    max-width: 640px;
    margin-inline: auto;
    width: 100%;
}

.ij-you-page-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--mud-palette-text-primary);
}

/* 14A: ≥960px /you widens into a two-column grid (same 1.35fr/1fr shape as
   .ij-connect-grid): the column you edit — profile, email, devices — left,
   a sticky account rail right. Like /connect, the grid is full-bleed inside
   the standard ij-page-content gutter — no centering cap, which would read as
   a different measure than its sibling pages. Below 960px it stays the #784
   settings column. */
.ij-you-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ij-you-delete-block {
    margin-top: 16px;
}

.ij-you-delete-footnote {
    display: block;
    padding: 6px 4px 0;
}

@media (min-width: 960px) {
    .ij-you-page {
        max-width: none;
        margin-inline: 0;
    }

    .ij-you-grid {
        display: grid;
        grid-template-columns: 1.35fr 1fr;
        gap: 28px;
        align-items: start;
    }

    .ij-you-main {
        min-width: 0;
    }

    .ij-you-rail {
        position: sticky;
        top: 20px;
    }
}

/* Wide ratio matrices (Stock view): pin the first column (the ratio name) so it
   stays visible while the many date columns scroll horizontally on a phone —
   otherwise you scroll a row of numbers with no idea which ratio you're reading.
   No-op when the table already fits (nothing scrolls under the sticky cell). */
.ij-ratios-table .mud-table-cell:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--mud-palette-surface);
}

.ij-ratios-table thead .mud-table-cell:first-child {
    z-index: 3;
}

/* ═══════════════════════════════════════
   /news — "Wire" redesign (dense feed + filter rail)
   Shared grid: 10px 1fr 200px 130px, gap 14 (column header + every row).
═══════════════════════════════════════ */

.nv-shell {
    display: flex;
    align-items: flex-start;
}

/* Rail — fleshed out in PR 3; the shell + border are in place now. */
.nv-rail {
    flex: none;
    width: 236px;
    align-self: stretch;
    border-right: 1px solid var(--mud-palette-lines-default);
    padding: 24px 18px 40px;
}

.nv-main {
    flex: 1;
    min-width: 0;
}

.nv-main-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px 16px;
}

.nv-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--mud-palette-text-primary);
}

.nv-subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.nv-status {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: none;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.nv-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
}

.nv-col-header {
    display: grid;
    /* #788: COMPANY gets the slack (200→260px) — names like "Canadian
       National Rail…" truncated on nearly every row while SOURCE sat narrow
       with dead space beside it. */
    grid-template-columns: 10px 1fr 260px 120px;
    gap: 14px;
    padding: 9px 26px;
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.nv-feed {
    padding: 0 12px;
}

.nv-row {
    /* Anchor for the stretched headline link below. */
    position: relative;
    display: grid;
    /* #788: keep in lockstep with .nv-col-header above. */
    grid-template-columns: 10px 1fr 260px 120px;
    gap: 14px;
    align-items: center;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s;
}

.nv-row:hover {
    background-color: var(--nv-row-hover);
}

/* Stretch the headline's hit-area across the whole row, so clicking anywhere
   still opens the external article (the row itself is no longer an anchor). */
.nv-headline::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* The company cell links to the stock page: raise it above the stretched
   headline overlay and give it a subtle hover affordance. */
a.nv-company {
    position: relative;
    z-index: 1;
    text-decoration: none;
}

a.nv-company:hover .nv-company-name {
    color: var(--mud-palette-text-primary);
    text-decoration: underline;
}

.nv-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-text-secondary);
}

/* Category accent on the dot — keyed off data-cat so the rail (PR 3) reuses it. */
[data-cat="earnings"] .nv-dot {
    background: var(--mud-palette-primary);
}
[data-cat="ma"] .nv-dot {
    background: var(--mud-palette-secondary);
}
[data-cat="financing"] .nv-dot {
    background: var(--mud-palette-success);
}
[data-cat="operations"] .nv-dot {
    background: var(--nv-cat-amber);
}
[data-cat="analyst"] .nv-dot {
    background: var(--nv-cat-teal);
}
[data-cat="legal"] .nv-dot {
    background: var(--mud-palette-error);
}
[data-cat="meeting"] .nv-dot {
    background: var(--nv-cat-rose);
}
/* Update = the classifier's fallback category → neutral dot on purpose. */
[data-cat="update"] .nv-dot {
    background: var(--mud-palette-text-secondary);
}

.nv-headline {
    min-width: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nv-company {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.nv-company-name {
    min-width: 0;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nv-ticker {
    flex: none;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
}

.nv-source {
    min-width: 0;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nv-day-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 14px 7px;
}

.nv-day-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.nv-day-rule {
    flex: 1;
    height: 1px;
    background: var(--nv-line-2);
}

.nv-loadmore-wrap {
    display: flex;
    justify-content: center;
    padding: 24px 0 8px;
}

.nv-loadmore {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 980px;
    padding: 10px 22px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.nv-loadmore:hover {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
}

.nv-loadmore:disabled {
    opacity: 0.6;
    cursor: default;
}

.nv-empty {
    margin: 48px 0;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

/* ── Filter rail ── */
.nv-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 9px 12px;
    margin-bottom: 22px;
}

.nv-search-icon {
    color: var(--mud-palette-text-secondary);
    flex: none;
}

.nv-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-size: 13px;
}

.nv-search-input::placeholder {
    color: var(--mud-palette-text-secondary);
}

/* Strip the WebKit search field's native clear/decoration chrome. */
.nv-search-input::-webkit-search-decoration,
.nv-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.nv-section {
    margin-bottom: 22px;
}

.nv-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin: 0 9px 8px;
}

.nv-facet {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 9px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s;
}

.nv-facet:hover {
    background-color: var(--nv-hover-bg);
}

/* Category present in context but with zero releases in the selected country. */
.nv-facet-empty {
    cursor: default;
}

.nv-facet-empty:hover {
    background-color: transparent;
}

.nv-facet-empty .nv-facet-label,
.nv-facet-empty .nv-facet-count {
    color: var(--mud-palette-text-disabled, var(--mud-palette-text-secondary));
}

.nv-facet-empty .nv-dot {
    opacity: 0.4;
}

.nv-facet-active {
    background: var(--mud-palette-background-gray);
}

.nv-facet-label {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nv-facet-active .nv-facet-label {
    font-weight: 700;
}

.nv-facet-count {
    flex: none;
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.nv-dot-neutral {
    background: var(--mud-palette-text-primary);
}

/* Sector rows have no dot — keep labels aligned with the dotted rows above. */
.nv-facet-nodot {
    padding-left: 26px;
}

/* Mono CA/US code badge (same chrome as the ticker badge). */
.nv-code {
    flex: none;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 1px 5px;
}

.nv-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
}

/* Mobile-only button that opens the rail as a slide-over. */
.nv-filters-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

.nv-rail-backdrop {
    display: none;
}

/* Collapse the rail on narrow viewports; filters open as a slide-over. */
@media (max-width: 860px) {
    .nv-rail {
        display: none;
    }

    .nv-rail-open {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 84vw;
        z-index: 1301;
        background: var(--mud-palette-surface);
        border-right: 1px solid var(--mud-palette-lines-default);
        overflow-y: auto;
        padding: 20px 16px 40px;
    }

    .nv-rail-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1300;
        background: color-mix(in srgb, var(--mud-palette-text-primary) 32%, transparent);
    }

    .nv-filters-toggle {
        display: inline-flex;
    }

    .nv-main-header,
    .nv-col-header {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* Phones: the desktop row is 10px + 1fr + 260px + 120px, which is wider than
   the screen before the headline gets a pixel (the page measured 518px at a
   375px viewport). Stack instead: headline on its own line, company left and
   source right beneath it — and the column header goes, since there are no
   columns left to head. */
@media (max-width: 599.95px) {
    .nv-col-header {
        display: none;
    }

    .nv-row {
        grid-template-columns: 10px minmax(0, 1fr) auto;
        grid-template-areas:
            "dot headline headline"
            ".   company  source";
        row-gap: 4px;
    }

    .nv-dot {
        grid-area: dot;
    }

    .nv-headline {
        grid-area: headline;
    }

    .nv-company {
        grid-area: company;
        min-width: 0;
    }

    .nv-source {
        grid-area: source;
        justify-self: end;
    }
}

/* Infinite-scroll sentinel — a 1px probe the IntersectionObserver watches. */
.nv-scroll-sentinel {
    height: 1px;
}

/* ── News, mobile variant (nvm-*) — design 2A, rendered by the MAUI head only.
   Ships to the device via the SyncSharedHostAssets copy of this file; kept next
   to the nv-* block because both style the shared NewsFeedView. Tokens only. ── */

.nvm-shell {
    background: var(--mud-palette-background);
}

.nvm-header {
    padding: 4px 20px 0;
}

.nvm-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nvm-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--mud-palette-text-primary);
}

.nvm-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

.nvm-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.nvm-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
}

.nvm-chips {
    display: flex;
    gap: 8px;
    padding: 14px 20px 10px;
    overflow-x: auto;
}

.nvm-chip {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 980px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.nvm-chip-active {
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
}

.nvm-chip-empty {
    opacity: 0.4;
}

/* #641 "Your stocks": a scope, not a category. The icon + inline layout keep it
   legible as a different kind of chip; sizing otherwise matches .nvm-chip so the
   row stays on one rhythm. */
.nvm-chip-scope {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.nvm-chip-scope .mud-icon-root {
    font-size: 16px;
}

.nvm-day {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px 7px;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--mud-palette-background);
}

.nvm-day-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.nvm-day-rule {
    flex: 1;
    height: 1px;
    background: var(--nv-line-2);
}

.nvm-row {
    display: block;
    padding: 11px 20px 12px;
    border-bottom: 1px solid var(--nv-line-2);
    text-decoration: none;
}

.nvm-headline {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15px;
    font-weight: 590;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
}

.nvm-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    min-width: 0;
}

.nvm-meta .nv-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
}

.nvm-cat {
    font-weight: 600;
    white-space: nowrap;
}

.nvm-ticker {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}

.nvm-source {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.nvm-empty {
    padding: 48px 20px;
}

.nvm-clear-filters {
    margin-top: 10px;
    border: 0;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--mud-palette-primary);
    cursor: pointer;
}

/* Active-filter pills + Clear in the chip row, and the Tune-button badge. */
.nvm-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 12px;
    border: 1.5px solid var(--mud-palette-primary);
    border-radius: 980px;
    background: none;
    color: var(--mud-palette-primary);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.nvm-pill-x {
    font-size: 11px;
}

.nvm-clear {
    flex: 0 0 auto;
    align-self: center;
    border: 0;
    background: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-primary);
    cursor: pointer;
}

.nvm-filter-btn {
    position: relative;
}

.nvm-filter-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
}

/* Filter bottom sheet — fixed above the 1100 bottom nav. */
.nvm-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1150;
    background: color-mix(in srgb, var(--mud-palette-black) 50%, transparent);
}

.nvm-sheet {
    will-change: transform;
    position: fixed;
    top: 86px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    padding: 8px 20px 0;
    background: var(--mud-palette-surface);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -20px 60px color-mix(in srgb, var(--mud-palette-black) 35%, transparent);
}

.nvm-grabber {
    width: 36px;
    height: 5px;
    margin: 0 auto 10px;
    border-radius: 980px;
    background: var(--mud-palette-text-disabled);
}

.nvm-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
}

.nvm-sheet-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--mud-palette-text-primary);
}

.nvm-reset {
    border: 0;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--mud-palette-primary);
    cursor: pointer;
}

.nvm-sheet-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.nvm-sheet-search-input {
    flex: 1;
    border: 0;
    background: none;
    outline: none;
    font-size: 15px;
    color: var(--mud-palette-text-primary);
}

.nvm-sheet-scroll {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 12px;
}

.nvm-sheet-section {
    padding: 16px 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.nvm-facet {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--mud-palette-text-primary);
    font-size: 15px;
    cursor: pointer;
}

.nvm-facet-active {
    background: var(--mud-palette-background-gray);
    font-weight: 600;
}

.nvm-facet-empty {
    opacity: 0.4;
}

/* The scope row sits above the first section header, so it needs the separation
   the header's own top padding would otherwise provide. */
.nvm-facet-scope {
    margin-top: 4px;
}

.nvm-facet-scope .mud-icon-root {
    font-size: 20px;
    color: var(--mud-palette-text-secondary);
}

.nvm-facet-label {
    flex: 1;
    text-align: left;
}

.nvm-facet-count {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.nvm-sector-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 8px;
}

.nvm-sector-chip {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid var(--nv-line-2);
    border-radius: 980px;
    background: none;
    color: var(--mud-palette-text-primary);
    font-size: 12.5px;
    cursor: pointer;
}

.nvm-sector-chip-active {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.nvm-sector-chip-count {
    margin-left: 5px;
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.nvm-sector-chip-empty {
    opacity: 0.45;
    cursor: default;
}

.nvm-sheet-footer {
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
}

.nvm-show-btn {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 14px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

/* ═══ Notifications panel — design 7A (docs/design_handoff_notifications) ═══
   Rendered inside MudDialogProvider; the providers wrapper in MainLayout carries
   ij-theme-dark so the --nv-* tokens resolve per-theme here too. */
.mud-dialog-content.ntf-content {
    padding: 0;
}

.ntf-panel {
    color: var(--mud-palette-text-primary);
}

.ntf-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 15px 18px 12px;
}

.ntf-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ntf-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 980px;
    font-size: 11px;
    font-weight: 700;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

.ntf-spacer {
    flex: 1;
}

.ntf-markall {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mud-palette-primary);
    font-family: inherit;
}

.ntf-hairline {
    height: 1px;
    background: var(--nv-line-2);
}

.ntf-list {
    display: flex;
    flex-direction: column;
    max-height: 60vh;
    overflow-y: auto;
    /* #789: the scroll edge used to slice the last visible row mid-glyph
       against the footer hairline. An alpha fade makes the cut read as "more
       below" instead of a rendering fault. A mask (not a painted overlay) so it
       works over both themes; sized to graze row padding, not text, when a
       short list doesn't overflow. */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}

.ntf-day {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px 5px;
}

.ntf-day-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    white-space: nowrap;
}

.ntf-day-rule {
    flex: 1;
    height: 1px;
    background: var(--nv-line-2);
}

.ntf-row {
    display: flex;
    gap: 11px;
    padding: 10px 18px 11px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ntf-row:hover {
    background: var(--nv-row-hover);
}

.ntf-row-read {
    opacity: 0.62;
}

.ntf-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    flex: none;
    margin-top: 6px;
}

.ntf-row-read .ntf-dot {
    background: color-mix(in srgb, var(--mud-palette-text-disabled) 45%, transparent);
}

.ntf-body {
    flex: 1;
    min-width: 0;
}

.ntf-headline {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.005em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ntf-row-read .ntf-headline {
    font-weight: 500;
}

.ntf-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
}

.ntf-cat {
    font-weight: 600;
    flex: none;
}

.ntf-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--mud-palette-text-disabled);
    flex: none;
}

.ntf-company {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.ntf-ticker {
    flex: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 5px;
}

/* News rows: the headline is a real anchor whose hit-area is stretched across
   the row — same trick as .nv-headline on /news — so clicking anywhere opens
   the article in a new tab. The company link rises above the overlay and
   routes to the stock page in-app. */
.ntf-row-news {
    position: relative;
}

a.ntf-headline {
    color: inherit;
    text-decoration: none;
}

a.ntf-headline::after {
    content: "";
    position: absolute;
    inset: 0;
}

.ntf-row-news:hover a.ntf-headline {
    text-decoration: underline;
}

a.ntf-company-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

a.ntf-company-link:hover .ntf-company {
    color: var(--mud-palette-text-primary);
    text-decoration: underline;
}

.ntf-time {
    font-size: 11.5px;
    color: var(--mud-palette-text-disabled);
    flex: none;
    margin-top: 2px;
}

/* Category label colors — the same data-cat mapping as the news feed dots. */
[data-cat="earnings"] .ntf-cat {
    color: var(--mud-palette-primary);
}
[data-cat="ma"] .ntf-cat {
    color: var(--mud-palette-secondary);
}
[data-cat="financing"] .ntf-cat {
    color: var(--mud-palette-success);
}
[data-cat="operations"] .ntf-cat {
    color: var(--nv-cat-amber);
}
[data-cat="analyst"] .ntf-cat {
    color: var(--nv-cat-teal);
}
[data-cat="legal"] .ntf-cat {
    color: var(--mud-palette-error);
}
[data-cat="meeting"] .ntf-cat {
    color: var(--nv-cat-rose);
}
/* Update = the classifier's fallback category → neutral label on purpose. */
[data-cat="update"] .ntf-cat {
    color: var(--mud-palette-text-secondary);
}

.ntf-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 38px 20px;
}

.ntf-empty-caption {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.ntf-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 0;
    background: none;
    padding: 11px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mud-palette-primary);
    font-family: inherit;
    transition: background-color 0.15s ease;
}

.ntf-footer:hover {
    background: var(--nv-row-hover);
}

/* ═══════════════════════════════════════
   LOGIN PAGE (/Account/Login — static SSR)
═══════════════════════════════════════ */

.ij-login-page {
    display: flex;
    /* #787: centre the auth card in the available height on narrow viewports —
       it used to sit top-aligned with ~600px of dead scroll beneath. min-height
       (not height) keeps taller content (email disclosure open) flowing
       normally. 64px top bar; the main-content's own bottom padding leaves the
       card a touch above true centre, which is the right optical position. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100dvh - 64px - 120px);
    padding: 24px 24px 40px;
}

/* #787: the top bar already carries the brand on narrow viewports — a second
   logo lockup 300px below it is noise. Desktop keeps the card logo (it anchors
   the isolated auth column beside the brand panel). */
@media (max-width: 899.95px) {
    .ij-login-logo {
        display: none;
    }
}

.ij-login-auth {
    width: 100%;
    max-width: 400px;
    color: var(--mud-palette-text-primary);
}

/* Brand panel is desktop-only decoration; narrow widths collapse to the
   single centered auth column (the 8A reference). */
.ij-login-brand {
    display: none;
}

@media (min-width: 900px) {
    .ij-login-page {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        padding: 0;
        min-height: calc(100vh - 64px);
    }

    .ij-login-auth {
        align-self: center;
        justify-self: center;
        padding: 44px 24px;
    }

    .ij-login-brand {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: var(--mud-palette-surface);
        border-left: 1px solid var(--mud-palette-lines-default);
        /* Sides relax on narrow desktops (900–1200px) so the card keeps its
           392px design width instead of wrapping captions early. */
        padding: 44px clamp(24px, 3.4vw, 48px);
        color: var(--mud-palette-text-primary);
    }
}

/* Soft radial glows — clay top-right, primary bottom-left, per the prototype. */
.ij-login-brand::before,
.ij-login-brand::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    pointer-events: none;
}

.ij-login-brand::before {
    top: -120px;
    right: -100px;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--ij-lp-clay) 13%, transparent),
        transparent 70%
    );
}

.ij-login-brand::after {
    bottom: -140px;
    left: -120px;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--mud-palette-primary) 10%, transparent),
        transparent 70%
    );
}

.ij-login-brand-inner {
    position: relative;
    width: 100%;
    max-width: 392px;
}

.ij-login-brand-headline {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin-bottom: 7px;
    max-width: 320px;
    text-wrap: balance;
}

.ij-login-panel-subtitle {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 20px;
}

/* ── The loop card (9A): steps on one continuous rail ── */

.ij-login-loop-card {
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 18px;
    padding: 18px 18px 16px;
}

.ij-login-loop-step {
    display: flex;
    gap: 14px;
}

/* Tile column: tile then rail segment; rows stack so the segments read as
   one continuous line under the tiles. */
.ij-login-loop-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: none;
    width: 40px;
}

.ij-login-loop-tile {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ij-login-loop-tile .mud-icon-root {
    font-size: 19px;
}

/* Same accents as the landing loop: Grade=primary, Note=purple, News=success,
   Ask Claude=clay (the mark carries its own fill). */
.ij-login-loop-tile--grade {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 15%, transparent);
}

.ij-login-loop-tile--note {
    color: var(--ij-lp-purple);
    background: color-mix(in srgb, var(--ij-lp-purple) 15%, transparent);
}

.ij-login-loop-tile--news {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent);
}

.ij-login-loop-tile--claude {
    background: color-mix(in srgb, var(--ij-lp-clay) 17%, transparent);
}

.ij-login-loop-rail {
    width: 2px;
    flex: 1;
    min-height: 12px;
    background: var(--mud-palette-lines-default);
}

/* The eye should land on Claude — the segment after News warms into clay. */
.ij-login-loop-rail--clay {
    background: linear-gradient(
        180deg,
        var(--mud-palette-lines-default),
        color-mix(in srgb, var(--ij-lp-clay) 60%, transparent)
    );
}

.ij-login-loop-body {
    padding: 1px 0 16px;
}

.ij-login-loop-body--last {
    padding-bottom: 0;
    flex: 1;
    min-width: 0;
}

.ij-login-loop-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ij-login-loop-caption {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

/* Ask Claude payoff: the example question in a clay inset. */
.ij-login-claude-quote {
    margin-top: 9px;
    background: color-mix(in srgb, var(--ij-lp-clay) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--ij-lp-clay) 26%, transparent);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 12px;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

.ij-login-coverage {
    margin-top: 16px;
    font-size: 12px;
    color: var(--mud-palette-text-disabled);
}

/* ── Header ─────────────────────────── */

.ij-login-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 22px;
}

.ij-login-logo {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    margin-bottom: 14px;
}

.ij-login-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.ij-login-subtitle {
    font-size: 13.5px;
    color: var(--mud-palette-text-secondary);
    margin-top: 5px;
}

/* ── Alerts (tinted, radius 11) ─────── */

.ij-login-alert.mud-alert {
    border-radius: 11px;
    padding: 4px 13px;
    margin-bottom: 14px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
}

.ij-login-alert--error.mud-alert {
    background: color-mix(in srgb, var(--mud-palette-error) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 30%, transparent);
}

.ij-login-alert--error.mud-alert .mud-alert-icon {
    color: var(--mud-palette-error);
}

.ij-login-alert--info.mud-alert {
    background: color-mix(in srgb, var(--mud-palette-info) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-info) 30%, transparent);
}

.ij-login-alert--info.mud-alert .mud-alert-icon {
    color: var(--mud-palette-info);
}

.ij-login-alert-link {
    display: block;
    margin-top: 4px;
    font-weight: 600;
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.ij-login-alert-link:hover {
    text-decoration: underline;
}

/* ── Card ───────────────────────────── */

.ij-login-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 18px;
    padding: 20px 20px 18px;
}

/* ── Provider buttons (ExternalLoginPicker) ── */

.ij-login-providers {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ij-login-provider.mud-button-root {
    height: 46px;
    border-radius: 980px;
    font-size: 14.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    transition: transform 0.15s;
}

.ij-login-provider.mud-button-root:hover {
    transform: translateY(-1px);
    box-shadow: none;
}

/* Apple: filled with the theme's text color, label in the page background —
   reads black-on-white in light and white-on-black in dark, like the mock. */
.ij-login-provider--apple.mud-button-root {
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
}

.ij-login-provider--apple.mud-button-root:hover {
    background: var(--mud-palette-text-primary);
}

.ij-login-provider--google.mud-button-root {
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
}

.ij-login-provider--google.mud-button-root:hover {
    background: var(--mud-palette-background-gray);
}

/* ── "or" divider ───────────────────── */

.ij-login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 14px;
}

.ij-login-divider-line {
    flex: 1;
    height: 1px;
    background: var(--mud-palette-lines-default);
}

.ij-login-divider-label {
    font-size: 11.5px;
    color: var(--mud-palette-text-disabled);
}

/* ── Email disclosure (<details>, no JS) ── */

.ij-login-email-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 42px;
    border-radius: 980px;
    /* #787: solid, not dashed — dashed reads as disabled/placeholder, and this
       fronts a primary sign-in path. Secondary-to-Google is already expressed
       by the muted colour and outline-vs-filled weight. */
    border: 1px solid var(--mud-palette-lines-default);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.ij-login-email-summary::-webkit-details-marker,
.ij-login-email-summary::marker {
    display: none;
}

.ij-login-email-summary:hover {
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-text-disabled);
}

.ij-login-email-summary-icon.mud-icon-root {
    font-size: 15px;
    width: 15px;
    height: 15px;
}

/* Open: the summary pill disappears and the form takes its place. */
.ij-login-email[open] > .ij-login-email-summary {
    display: none;
}

/* ── Email/password form ────────────── */

.ij-login-form {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.ij-login-field {
    display: flex;
    flex-direction: column;
}

.ij-login-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 5px;
}

.ij-login-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.ij-login-label-row .ij-login-label {
    margin-bottom: 0;
}

.ij-login-forgot {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.ij-login-forgot:hover {
    text-decoration: underline;
}

.ij-login-input {
    height: 42px;
    border-radius: 11px;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    padding: 0 13px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--mud-palette-text-primary);
    width: 100%;
    outline: none;
}

.ij-login-input::placeholder {
    color: var(--mud-palette-text-disabled);
}

.ij-login-input:focus {
    border-color: var(--mud-palette-primary);
}

.ij-login-input--error {
    border-color: color-mix(in srgb, var(--mud-palette-error) 45%, transparent);
}

.ij-login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

/* appearance:none is required for the 5px corners: Chromium's UA stylesheet
   wins over author rules on native-appearance checkboxes. */
.ij-login-checkbox {
    appearance: none;
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    border-radius: 5px;
    border: 1.5px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    display: inline-grid;
    place-content: center;
    cursor: pointer;
}

.ij-login-checkbox:checked {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

.ij-login-checkbox:checked::before {
    content: "";
    width: 9px;
    height: 9px;
    background: var(--mud-palette-primary-text);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.ij-login-submit.mud-button-root {
    height: 44px;
    border-radius: 980px;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
}

.ij-login-submit.mud-button-root:hover {
    box-shadow: none;
}

/* ── Register line ──────────────────── */

.ij-login-register {
    margin-top: 20px;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.ij-login-register-link {
    font-weight: 600;
    color: var(--mud-palette-primary);
    text-decoration: none;
    margin-left: 3px;
}

.ij-login-register-link:hover {
    text-decoration: underline;
}

/* Narrow: center the header like the single-column (8A) reference. */
@media (max-width: 899px) {
    .ij-login-header {
        align-items: center;
        text-align: center;
    }
}

/* ═══════════════════════════════════════
   REGISTER PAGE (/Account/Register — static SSR, shares the login shell)
═══════════════════════════════════════ */

.ij-register-brandrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
}

.ij-register-brandmark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

.ij-register-wordmark {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.ij-register-subtitle {
    margin-bottom: 22px;
}

/* Lock forward-notice: the enforced consent lives on the interstitial. */
.ij-register-termsnote {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--mud-palette-text-disabled);
}

.ij-register-termsnote-icon.mud-icon-root {
    font-size: 13px;
    width: 13px;
    height: 13px;
    flex: none;
    margin-top: 2px;
}

.ij-register-legal-link {
    color: var(--mud-palette-text-secondary);
    text-decoration: underline;
}

.ij-register-emailnote {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--mud-palette-text-disabled);
}

/* ═══════════════════════════════════════
   EXTERNAL-LOGIN INTERSTITIAL (/Account/ExternalLogin — static SSR)
═══════════════════════════════════════ */

.ij-extlogin-page {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 52px 24px 64px;
    min-height: calc(100vh - 64px);
}

/* Soft clay glow, top-center, per the prototype. */
.ij-extlogin-page::before {
    content: "";
    position: absolute;
    top: -140px;
    left: 50%;
    transform: translateX(-50%);
    width: 520px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--ij-lp-clay) 12%, transparent),
        transparent 70%
    );
    pointer-events: none;
}

.ij-extlogin-wrap {
    position: relative;
    width: 100%;
    max-width: 408px;
    color: var(--mud-palette-text-primary);
}

.ij-extlogin-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 18px;
    padding: 24px 22px 20px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.ij-extlogin-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ij-extlogin-tile {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex: none;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ij-extlogin-tile .mud-icon-root {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.ij-extlogin-head-text {
    flex: 1;
    min-width: 0;
}

.ij-extlogin-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.ij-extlogin-signingup {
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Consent inset — the one enforced acceptance in the sign-up flow. */
.ij-extlogin-consent {
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 13px;
    padding: 14px 15px;
    margin-bottom: 14px;
}

.ij-extlogin-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    cursor: pointer;
}

/* appearance:none required — Chromium's UA stylesheet overrides radius on
   native checkboxes (same trick as the login remember-me box). */
.ij-extlogin-checkbox {
    appearance: none;
    flex: none;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    border-radius: 6px;
    border: 1.5px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    display: inline-grid;
    place-content: center;
    cursor: pointer;
}

.ij-extlogin-checkbox:checked {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

.ij-extlogin-checkbox:checked::before {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--mud-palette-primary-text);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.ij-extlogin-consent-text {
    font-size: 13px;
    line-height: 1.5;
}

.ij-extlogin-legal-link {
    color: inherit;
    text-decoration: underline;
    font-weight: 500;
}

.ij-extlogin-validation {
    display: block;
    font-size: 12px;
    color: var(--mud-palette-error);
    margin-bottom: 10px;
}

.ij-extlogin-cta.mud-button-root {
    height: 46px;
    width: 100%;
    border-radius: 980px;
    font-size: 14.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
}

.ij-extlogin-cta.mud-button-root:hover {
    box-shadow: none;
}

.ij-extlogin-emailfield {
    margin-bottom: 14px;
}

.ij-extlogin-startover {
    text-align: center;
    margin-top: 13px;
    font-size: 12.5px;
    color: var(--mud-palette-text-disabled);
}

.ij-extlogin-startover-link {
    color: var(--mud-palette-primary);
    font-weight: 500;
    text-decoration: none;
    margin-left: 3px;
}

.ij-extlogin-startover-link:hover {
    text-decoration: underline;
}

.ij-extlogin-lockline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 11.5px;
    color: var(--mud-palette-text-disabled);
}

.ij-extlogin-lockline .mud-icon-root {
    font-size: 12px;
    width: 12px;
    height: 12px;
}

/* Production error page (/Error). Centres the shared ij-empty-state block in the
   content area and gives the recovery action and reference line their spacing. */
.ij-error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 24px;
}

.ij-error-page-action {
    margin-top: 20px;
}

.ij-error-page-ref {
    margin-top: 20px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.ij-error-page-ref code {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-disabled);
    word-break: break-all;
}

/* ═══════════════════════════════════════
   FAIR-VALUE ALERTS — /alerts (#711 M2)
   Settings-column measure, like /you. ═══ */

.ij-fva-page {
    max-width: 640px;
    margin: 0 auto;
    padding: 3rem 24px 5rem;
}

.ij-fva-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

/* The action never wraps mid-label — the sub-line beside it is allowed to. */
.ij-fva-head .mud-button-root {
    white-space: nowrap;
    flex-shrink: 0;
}

.ij-fva-title {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.4px;
    margin: 0 0 4px;
}

.ij-fva-sub {
    color: var(--ij-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.ij-fva-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ij-fva-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    /* The app's tinted-block convention (pro-billing rails, gate blocks) —
       --ij-surface is white-on-white in light mode and disappears. */
    background: var(--ij-bg-gray);
}

.ij-fva-row--paused .ij-fva-rule {
    /* Secondary, not tertiary: tertiary measures 2.6:1 and the rule is still
       content to read — the Paused chip alone carries the state. */
    color: var(--ij-text-secondary);
}

.ij-fva-row--sample {
    pointer-events: none;
}

.ij-fva-row-main {
    flex: 1;
    min-width: 0;
}

.ij-fva-row-scope {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ij-fva-rule {
    color: var(--ij-text-secondary);
    font-size: 0.875rem;
    margin-top: 2px;
}

.ij-fva-paused-chip {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--ij-text-secondary);
    background: var(--ij-divider);
    border-radius: 999px;
    padding: 2px 8px;
}

.ij-fva-dialog {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 4px 0;
}

/* #1275 — the scope segmented control at phone width.
   "All valued stocks" wrapped to two lines while "A watchlist" stayed on one,
   leaving the control lopsided and taller than it needs to be. The culprit is
   the shared button's `padding: 6px 16px`: 32px of a ~117px segment goes to
   padding, leaving ~85px for a label that needs ~107px at 13px.

   Scoped to THIS dialog rather than relaxing .ij-segmented-btn globally. Seven
   other segmented controls (Buy/Sell, CAD/USD, Note/Comment, the comment
   filters) carry short labels that already fit — shrinking them would be a
   change nobody asked for on surfaces that have no problem. */
@media (max-width: 400px) {
    .ij-fva-dialog .ij-segmented-btn {
        padding: 6px 8px;
        font-size: 12px;
        /* Font and padding alone could not win here, and the reason is worth
           recording: the dialog is MaxWidth.Small with NO FullWidth, so MudBlazor
           sizes it to its CONTENT. Shrinking the text shrank the dialog, which
           re-wrapped the text — measured, 43px tall before and 41px after, still
           two lines. nowrap breaks the loop: the label cannot wrap, so the
           content-sized dialog grows to fit it instead. */
        white-space: nowrap;
    }
}

.ij-fva-advanced-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
}

.ij-fva-advanced {
    display: flex;
    gap: 14px;
}

@media (max-width: 599px) {
    .ij-fva-head {
        flex-direction: column;
    }

    .ij-fva-advanced {
        flex-direction: column;
        gap: 6px;
    }
}

/* ═══════════════════════════════════════
   SCREENER — /screener (#525)
   Full-gutter workspace; the table scrolls
   in its own wrapper, the page never does. ═══ */

.ij-scr-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.ij-scr-title {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.4px;
    margin: 0 0 4px;
}

.ij-scr-sub {
    color: var(--ij-text-secondary);
    margin: 0;
    line-height: 1.5;
    max-width: 640px;
}

.ij-scr-count {
    color: var(--ij-text-secondary);
    white-space: nowrap;
}

.ij-scr-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin-bottom: 16px;
}

.ij-scr-rail .mud-select,
.ij-scr-rail .mud-input-control {
    min-width: 170px;
    max-width: 220px;
}

.ij-scr-threshold {
    max-width: 150px;
}

.ij-scr-rail-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ij-scr-actions-gap {
    flex: 1;
}

.ij-scr-saved-list {
    min-width: 220px;
    padding: 4px 0;
}

.ij-scr-saved-empty {
    color: var(--ij-text-secondary);
    padding: 10px 16px;
    white-space: nowrap;
}

.ij-scr-saved-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 8px 2px 0;
}

.ij-scr-saved-apply {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ij-text-primary);
    font: inherit;
    text-align: left;
    flex: 1;
    padding: 8px 0 8px 16px;
}

.ij-scr-saved-apply:hover {
    color: var(--mud-palette-primary);
}

.ij-scr-hint {
    color: var(--ij-text-secondary);
    margin: 0 0 12px;
}

.ij-scr-table {
    overflow-x: auto;
}

.ij-scr-ticker {
    font-weight: 600;
    white-space: nowrap;
}

.ij-scr-up {
    color: var(--ij-gain);
}

.ij-scr-down {
    color: var(--ij-loss);
}

.ij-scr-empty {
    color: var(--ij-text-secondary);
    padding: 24px 16px;
}

/* Phones: MudTable's stacked fallback renders a LABELLESS sort-select above the
   first row — a bare underline with a caret that reads as broken UI — and pads
   each stacked cell like a desktop row, so one result eats most of a screen.
   Drop the stray control (default ticker order stands on mobile) and tighten
   the cells. */
@media (max-width: 599.95px) {
    .ij-scr-table .mud-table-smalldevices-sortselect {
        display: none;
    }

    .ij-scr-table .mud-table-body .mud-table-cell {
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

/* The gate's invented sample (never real data). */
.ij-scr-sample {
    pointer-events: none;
}

.ij-scr-sample table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.ij-scr-sample th {
    text-align: left;
    color: var(--ij-text-secondary);
    font-weight: 600;
    padding: 6px 10px;
}

.ij-scr-sample td {
    padding: 6px 10px;
    border-top: 1px solid var(--ij-divider);
}

/* ═══════════════════════════════════════
   PUBLIC STOCK PAGE (#493)

   /stocks/{ticker} is the app's first impression for anyone arriving from search, and
   it shipped (#492) as deliberately minimal markup: bare MudText and divs, a flat list
   that repeated each metric's name once per year, and no ask at the end.

   Apple dialect, same as the FAQ and the legal pages: hairlines instead of cards,
   no shadows, one accent (the CTA). Everything resolves from the MudBlazor palette so
   dark mode needs no rules of its own — there is no dark CLASS to hang them on
   (MudBlazor swaps :root variables).
═══════════════════════════════════════ */

.ij-ps-head {
    margin-bottom: 20px;
}

.ij-ps-name {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--mud-palette-text-primary);
}

.ij-ps-ticker {
    margin-left: 12px;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--mud-palette-text-secondary);
}

/* #1503 M3b: the chip inside the public page's h1 — reset the heading's type so the
   chip keeps its own 11.5px, and sit it on the ticker's baseline. */
.ij-ps-earnings-chip {
    margin-left: 12px;
    vertical-align: middle;
    letter-spacing: 0;
}

.ij-ps-facts {
    margin: 8px 0 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.ij-ps-facts a {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.ij-ps-facts a:hover {
    text-decoration: underline;
}

/* Prose gets a reading measure even though the page itself is full-gutter: a business
   description set across 1200px is a wall, and this one is the page's only prose. */
.ij-ps-about {
    margin: 0 0 8px;
    max-width: 68ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
}

.ij-ps-h {
    margin: 40px 0 16px;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--mud-palette-text-primary);
}

/* ── Ratios ─────────────────────────────────────────── */

/* No enclosing box and no cell borders. The hairline-grid version of this drew its lines
   by showing a coloured container through 1px gaps, which paints every EMPTY cell in the
   last row as a solid grey block — seven metrics in a four-wide grid left one, and it read
   as a broken tile. Bare columns also match the dialect: the FAQ and the news list below
   use hairlines because they are LISTS; a metric is a figure, and a figure needs no chrome. */
.ij-ps-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px 32px;
}

/* min-width:0 because a long metric label in a grid item otherwise widens the track
   and pushes the whole page into horizontal scroll — the repo's recurring grid trap. */
.ij-ps-metric {
    min-width: 0;
}

.ij-ps-metric-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.ij-ps-metric-value {
    margin-top: 4px;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--mud-palette-text-primary);
}

.ij-ps-metric-period {
    margin-left: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-secondary);
}

.ij-ps-metric-history {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 10px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.ij-ps-metric-year {
    margin-right: 4px;
    opacity: 0.75;
}

/* ── News ───────────────────────────────────────────── */

.ij-ps-news {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.ij-ps-news-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    text-decoration: none;
}

.ij-ps-news-headline {
    flex: 1 1 320px;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.ij-ps-news-row:hover .ij-ps-news-headline {
    color: var(--mud-palette-primary);
}

.ij-ps-news-meta {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* ── The ask ────────────────────────────────────────── */

.ij-ps-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 48px;
    padding: 24px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
}

.ij-ps-cta-title {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--mud-palette-text-primary);
}

.ij-ps-cta-body {
    margin-top: 4px;
    max-width: 60ch;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.ij-ps-cta-btn {
    display: inline-block;
    flex: 0 0 auto;
    padding: 10px 24px;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.ij-ps-cta-btn:hover {
    opacity: 0.9;
}

/* --ij-text-secondary, not tertiary: this is the compliance statement, so it has to be
   findable, and tertiary measures 2.6:1 against the page. */
.ij-ps-legal {
    margin: 24px 0 0;
    max-width: 68ch;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}

.ij-ps-legal a {
    color: var(--mud-palette-primary);
}

@media (max-width: 599.95px) {
    .ij-ps-name {
        font-size: 1.625rem;
    }

    .ij-ps-ticker {
        display: block;
        margin-left: 0;
        margin-top: 2px;
    }

    .ij-ps-earnings-chip {
        margin: 8px 0 0;
    }

    .ij-ps-metrics {
        grid-template-columns: 1fr;
    }

    .ij-ps-cta {
        margin-top: 36px;
    }

    .ij-ps-cta-btn {
        width: 100%;
        text-align: center;
    }
}

/* ── /you: the "Your list" section (canvas 13b) ─────────────────────────────
   The list's preferences moved here from the desk. Layout follows this page's
   own vocabulary (switch first, label right, hint under it); these three rules
   only cover what the page had no equivalent for. */
.ij-you-list-switch-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Capped rather than full-width: a settings row is not a form field, and a
   three-way segmented stretched across the column reads as a toolbar. */
.ij-you-list-segmented {
    max-width: 340px;
}

.ij-you-list-segmented--wide {
    max-width: 400px;
}

.ij-you-list-value {
    border: none;
    background: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    padding: 0;
}

.ij-you-list-value:hover {
    color: var(--mud-palette-text-primary);
}