/* =============================================================================
   Macro Outlook page (.macro-outlook-report) + Portfolio News tab
   (.stock-news-*). All rules are scoped under these wrappers — assets/ CSS
   is global in Dash, so nothing here may leak into other pages.
   ============================================================================= */

/* --- Markdown report body (dcc.Markdown output: raw table, heading and
   paragraph tags) ---------------------------------------------------------- */

/* Nothing in the report may run off the right edge of a phone: the model
   writes bare source URLs ("bls.gov/news.release/archives/cpi_07142026.htm")
   and space-free formulas, and one of those in a list item was enough to
   make the whole page scroll sideways. Inherited, so table cells get it too
   (the mobile block below refines the label column). */
.macro-outlook-report {
    overflow-wrap: break-word;
}

.macro-outlook-report table {
    border-collapse: collapse;
    margin: 12px 0;
    min-width: 55%;
    display: block;
    overflow-x: auto;   /* wide tables scroll inside their own container */
}

.macro-outlook-report th,
.macro-outlook-report td {
    border: 1px solid var(--bs-border-color, #444);
    padding: 6px 10px;
    text-align: left;
}

.macro-outlook-report th {
    font-weight: 600;
}

/* Opt OUT of the app-wide data-table treatment (05_tables.css). Those rules
   are unscoped — `th:first-child, td:first-child { position: sticky
   !important; white-space: nowrap; background-color: … }` plus a
   `::after` seam mask — and they were written for the scrollable screening
   / portfolio grids, where a frozen, never-wrapping first column is the
   point. They also hit these markdown tables, and `white-space: nowrap` is
   what pushed the report's long label column (and with it the value column)
   off the right edge of a phone screen. Prose tables want the opposite:
   labels that wrap, no frozen column, no painted seam.
   `position` needs !important to beat the !important in 05_tables.css; the
   rest wins on specificity. */
.macro-outlook-report th:first-child,
.macro-outlook-report td:first-child {
    position: static !important;
    white-space: normal;
    background-color: transparent;
}

.macro-outlook-report th:first-child::after,
.macro-outlook-report td:first-child::after {
    content: none;
}

/* Cell text size. Table cells are NOT in the .text-readable font list
   (p/li/span/a/em/strong/b/i), so the global
   `body * { font-size: var(--font-size-base) !important }` of
   02_global_dynamic_fonts.css pinned plain cells to the dense app size
   (10px on mobile) while a **bold** cell matched `.text-readable strong`
   and jumped to 15px — one table rendered at two sizes. Pin the whole cell
   (and its inline children) to the small-prose token instead.
   Selectors go through `table` on purpose: 03_typography.css also carries
   `.text-readable td/th` and `.text-readable td span` at !important, and
   without the extra element these would only tie with those and win on
   source order alone. */
.macro-outlook-report table th,
.macro-outlook-report table td,
.macro-outlook-report table th *,
.macro-outlook-report table td * {
    font-size: var(--font-size-prose-sm, 13px) !important;
}

/* Phones and tablets: tighter cells, and a label column that may break
   anywhere. */
@media (max-width: 991.98px) {
    .macro-outlook-report th,
    .macro-outlook-report td {
        padding: 5px 7px;
    }

    /* Only the label column gets `anywhere` (the value columns keep the
       inherited `break-word`), and only it gets a floor. Both halves are
       measured, not stylistic:
       — `anywhere` is the one thing that lets a column shrink below its
         longest word, so an unbroken model string (a source URL, a formula
         written without spaces) can't widen the table. The label column is
         where those land.
       — a floor is needed because the algorithm otherwise reads `anywhere`
         as licence to squeeze: the 7-column scenario table shrinks this
         column until the label stacks one character per line.
       Extending `anywhere` to every cell was tried and reverted: the numeric
       columns then shrink too and split their own values ("0.50" over two
       lines), and the floor that would prevent that (~4.5em on 7 columns)
       does not fit a phone. The remaining gap is narrow and has never
       occurred: a >100-character space-free token in a VALUE column would
       still widen the table and let the page scroll sideways. */
    .macro-outlook-report th:first-child,
    .macro-outlook-report td:first-child {
        overflow-wrap: anywhere;
        min-width: 4.5em;
    }
}

/* Fit the table to the screen. Wrapping alone leaves the width up to the
   `display: block` shrink-to-fit above; a real table capped at 100% is what
   guarantees the last column stays on screen, and auto layout then shares
   the row out in proportion to each column's content (the long label column
   wraps and keeps most of the width, a column of short numbers takes only
   what it needs). No per-column max-width: it is ignored in this mode
   anyway (verified in Blink).
   Not below 360px: there a 7-column table cannot fit whatever we do, and
   `display: block` at least confines the leftover to a scroll inside the
   table instead of dragging the whole page sideways. */
@media (min-width: 360px) and (max-width: 991.98px) {
    .macro-outlook-report table {
        display: table;
        width: 100%;
        min-width: 0;
        table-layout: auto;
    }
}

.macro-outlook-report h1 { font-size: 1.45rem; margin: 22px 0 10px; }
.macro-outlook-report h2 { font-size: 1.25rem; margin: 20px 0 8px; }
.macro-outlook-report h3 { font-size: 1.05rem; margin: 16px 0 8px; }

.macro-outlook-report code {
    padding: 1px 5px;
    border-radius: 6px;
    background: rgba(127, 127, 127, 0.18);
}

.macro-outlook-tile .macro-outlook-tile-value {
    font-size: 1.35rem;
    font-weight: 600;
}

/* --- Portfolio News tab cards ---------------------------------------------- */

.stock-news-card {
    height: 100%;
}

.stock-news-card .stock-news-headline a {
    text-decoration: none;
    color: inherit;
    font-weight: 600;
}

.stock-news-card .stock-news-headline a:hover {
    text-decoration: underline;
}

.stock-news-card .stock-news-why {
    border-left: 2px solid var(--bs-border-color, #444);
    padding: 2px 0 2px 10px;
}

.stock-news-card .stock-news-read {
    background: rgba(127, 127, 127, 0.12);
    border-radius: 8px;
    padding: 6px 10px;
}

.stock-news-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}