/* =============================================================================
   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;
}

/* (The frozen-first-column rules of 05_tables.css are scoped to the table
   builders' wrappers since 2026-09-12, so these prose tables no longer need
   an opt-out: labels wrap, nothing is frozen, no seam is painted.) */

/* 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;
    }
}

.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);
}

/* !important is load-bearing: without it the global
   `body * { font-size: var(--font-size-base) !important }` rule
   (02_global_dynamic_fonts.css) wins and the KPI value renders SMALLER than
   its .text-readable-small caption. Prose token per the typography ladder
   (docs/_PLAN_typography_broad_pass.md) — no new numeric sizes. */
/* Standalone selector on purpose: the portfolio Summary metric tiles reuse
   the class WITHOUT a .macro-outlook-tile ancestor. The class alone (0,1,0)
   still out-specifies the global body* rule. */
.macro-outlook-tile-value {
    font-size: var(--font-size-prose) !important;
    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;
}

/* Per-story mark-read control + "marked read" card state (shown via the
   "Show read" switch). "-marked-read" on purpose: .stock-news-read is the
   read-label block inside the card body. The glyph is a text character
   (✓/↺) — the app loads no icon font. */
.stock-news-card .stock-news-read-btn {
    line-height: 1;
    opacity: 0.55;
    box-shadow: none;
    text-decoration: none;
}

.stock-news-read-glyph {
    font-weight: 700;
    line-height: 1;
}

.stock-news-card .stock-news-read-btn:hover {
    opacity: 1;
}

/* No hover on touch devices (the founder browses on iPhone) — keep the
   control clearly visible there instead of dimmed forever. */
@media (hover: none) {
    .stock-news-card .stock-news-read-btn {
        opacity: 0.75;
    }
}

.stock-news-card-marked-read {
    opacity: 0.55;
}

.stock-news-show-read .form-check-label {
    color: var(--bs-secondary-color, #888);
}