/*
 * Reusable "storytelling" summary block used to surface a single, factual
 * headline + supporting message below a section heading (e.g. Portfolio
 * Explorer). Shared across Allocation / Performance / Risk tabs.
 *
 * Status colors intentionally reuse the project's Bootstrap theme tokens
 * (--bs-success / --bs-warning / --bs-danger) rather than hardcoded colors.
 *
 * The block-level highlight (background/border) reuses the same accent
 * tokens as the "Create Portfolio" CTA (.ss-btn-accent in custom.css:
 * --ss-accent / --ss-accent-soft / --ss-accent-focus) so the summary reads
 * as a light, on-brand highlight rather than a separate alert card.
 */

.portfolio-story {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px 9px;
  /*
   * Aligns the card's edges with its sibling header's padding (e.g. the
   * "PORTFOLIO EXPLORER" / "Cumulative Return" kickers), since `.pop2-card`
   * itself has no padding of its own. The Risk tab's shell already applies
   * this same padding to the whole section, so it's zeroed back out below
   * to avoid a doubled inset there.
   */
  margin: 0 var(--card-pad-x, 16px);
  margin-top: 10px;
  border-radius: 8px;
  background: var(--ss-accent-soft, rgba(52, 211, 153, 0.15));
  border: 1px solid var(--ss-accent-focus, rgba(52, 211, 153, 0.35));
}

.portfolio-story[hidden] {
  display: none;
}

/*
 * Wrapper for the Risk tab's two stacked stories (portfolio-level
 * Diversification Benefit insight first, risk-driver insight second).
 * Each child keeps its own independent .portfolio-story markup/behavior
 * (icon, headline, message, mobile collapse toggle) -- this wrapper only
 * controls overall visibility and tightens the vertical rhythm between
 * the two items so the bubble chart below isn't pushed down substantially.
 */
.portfolio-risk-stories[hidden] {
  display: none;
}

.portfolio-risk-stories .portfolio-story {
  margin-top: 8px;
  /* .snapshot-analytics-shell already applies --card-pad-x as real padding
     around this whole section, so the story shouldn't add its own inset on
     top of it -- let it reach the same edge as the section's other content
     (e.g. the "Portfolio Drivers" / "Stock Characteristics" buttons). */
  margin-left: 0;
  margin-right: 0;
}

.portfolio-risk-stories .portfolio-story + .portfolio-story {
  margin-top: 6px;
}

.portfolio-story__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  line-height: 1;
}

.portfolio-story__icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.portfolio-story__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
  row-gap: 0;
}

.portfolio-story__headline {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e7edf6;
  line-height: 1.35;
}

.portfolio-story__message {
  font-size: 0.86rem;
  font-weight: 400;
  color: #9aa8bc;
  line-height: 1.35;
}

.portfolio-story__toggle {
  display: none;
}

.story-status--good .portfolio-story__icon { color: var(--bs-success, #67c23a); }
.story-status--warning .portfolio-story__icon { color: var(--bs-warning, #f19937); }
.story-status--bad .portfolio-story__icon { color: var(--bs-danger, #ea4e3d); }

@media (max-width: 768px) {
  .portfolio-risk-stories .portfolio-story {
    margin-top: 6px;
  }

  .portfolio-risk-stories .portfolio-story + .portfolio-story {
    margin-top: 4px;
  }

  .portfolio-story {
    display: block;
    padding: 6px 8px 7px;
    margin-top: 8px;
  }

  /*
   * On mobile the icon used to live in a fixed-width flex column next to
   * `.portfolio-story__content` (a two-column split), and flexbox's
   * line-wrapping algorithm sizes text items by their unwrapped
   * (max-content) width when deciding what fits on a line -- so a long
   * headline would get bumped to its own line, leaving the icon stranded
   * alone above it.
   *
   * Floating the icon and letting the headline/toggle flow as ordinary
   * inline content sidesteps that entirely: real text reflow wraps around
   * the icon like a dropcap, and the toggle naturally continues on the
   * same line as the headline when there's room, or starts at the left
   * margin on its own line when there isn't -- exactly like normal
   * wrapping text, no flex line-fitting quirks involved.
   */
  .portfolio-story__content {
    display: block;
  }

  .portfolio-story__icon {
    float: left;
    margin: 2px 6px 4px 0;
  }

  .portfolio-story__headline {
    display: inline;
  }

  .portfolio-story__message {
    display: block;
    clear: left;
    margin-top: 4px;
  }

  .portfolio-story__message[hidden] {
    display: none;
  }

  .portfolio-story__headline,
  .portfolio-story__message {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .portfolio-story__toggle {
    display: inline-flex;
    align-items: center;
    vertical-align: baseline;
    margin-left: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #c6d3e5;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
  }

  /* Clearfix: keep the card border wrapping the floated icon even when
     the headline alone is shorter than the icon's height. */
  .portfolio-story::after {
    content: "";
    display: table;
    clear: both;
  }

  .portfolio-story__toggle:hover,
  .portfolio-story__toggle:focus {
    color: #e7edf6;
  }

  .portfolio-story__toggle:focus-visible {
    outline: 2px solid rgba(198, 211, 229, 0.45);
    outline-offset: 2px;
    border-radius: 4px;
  }
}