/* ==========================================================================
   The Many Ways to Measure Inflation — component styles
   Prefix: mwmi-   |   Article type: Standard Article (FMG CMS)

   COLOR STRATEGY:
   - Accent moments (big number, bars, datacard border, CPI-W emphasis)
     use var(--paletteColor3, #333) — the site's brand accent, charcoal fallback.
   - Body prose + structural borders/dividers stay as currentColor tints so
     they inherit the host site's text color.
   Do NOT set font-family / font-size / color on the wrapper — let prose inherit.

   !IMPORTANT POLICY (surgical): rules that target native HTML elements inside
   the wrapper (table/th/td/etc), plus any typography (font-size, color, weight,
   line-height, letter-spacing), carry !important because the CMS's global
   stylesheet will otherwise override them. Rules on our own prefixed custom
   containers with decorative or layout properties (display, flex, gap,
   border-radius, background, transition, etc.) do NOT carry !important —
   the CMS doesn't target those class names, so the natural cascade wins.
   Run the DevTools verification pass on the live URL and add !important back
   to any rule that turns out to be overridden. See fmg-cms-coding.SKILL.md.
   ========================================================================== */

/* ---- Data moment card ---------------------------------------------------- */
/* Background fill uses a muted palette tint (6%) rather than a neutral gray.
   Design goal (per stakeholder feedback): the custom components should stop
   the eye against the surrounding white article prose — a neutral gray fill
   reads as "another paragraph block" and gets skimmed. A palette-tinted fill
   makes the component register as its own module and gives the accent color
   a persistent presence even before the reader hits the palette-colored
   headline number. 6% is low enough to preserve text contrast on saturated
   palettes (deep navy, burgundy) yet still visibly tinted on muted ones.
   The low-contrast fallback (below) intentionally leaves this palette-tinted
   background alone — at 6% opacity even bright yellow reads as a pleasant
   pale wash, and keeping the tint preserves palette identity when text is
   neutralized to currentColor for legibility. */
.mwmi-datacard {
  border: 0.5px solid color-mix(in srgb, var(--paletteColor3, #333) 22%, transparent);
  border-radius: 12px;
  padding: 22px 24px;
  margin: 24px 0;
  background: color-mix(in srgb, var(--paletteColor3, #333) 6%, transparent);
}

.mwmi-datacard .mwmi-figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

/* The big number is a scoped display element, so forced styling is allowed.
   tabular-nums keeps digit width stable while it counts up (no reflow jitter). */
.mwmi-datacard .mwmi-num {
  font-size: 46px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--paletteColor3, #333) !important;
}

.mwmi-datacard .mwmi-figure-label {
  font-size: 15px !important;
  color: color-mix(in srgb, currentColor 70%, transparent) !important;
}

.mwmi-datacard .mwmi-sub {
  font-size: 13px !important;
  color: color-mix(in srgb, currentColor 60%, transparent) !important;
  margin-top: 6px;
}

/* Decorative bar row. Bars are injected by JS into #mwmi-bars. */
.mwmi-datacard .mwmi-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 64px;
  margin: 14px 0 4px;
}

.mwmi-datacard .mwmi-bar {
  flex: 1 1 auto;
  border-radius: 2px 2px 0 0;
  height: 0;
  /* height animates to its per-bar --h once JS adds .mwmi-go to the card */
  transition: height 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mwmi-datacard.mwmi-go .mwmi-bar {
  height: var(--h);
}

/* ---- Comparison table (desktop) ----------------------------------------- */
/* Wrapper is treated as a "card" to match the data card's visual language:
   subtle palette-colored border + 12px radius. overflow: hidden clips the
   header row's fill to the rounded top corners; the wrapper border makes the
   bottom corners visible too (border clips against the radius). Same border
   opacity/color as the data card so both custom components read as members
   of the same family. */
.mwmi-tablewrap {
  margin: 30px 0;
  border: 0.5px solid color-mix(in srgb, var(--paletteColor3, #333) 22%, transparent);
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--paletteColor3, #333) 6%, transparent);
}

/* Table itself is a native element — CMS globals will style it. */
.mwmi-tablewrap table {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
  font-size: 15px !important;
}

/* Header background is a deeper palette tint (12%) so the thead reads as a
   distinct band on top of the wrapper's 6% base fill. Applied to thead tr
   rather than th — putting it on th would visually work here (both are the
   same palette color) but it's kept on tr for consistency with the pattern
   established when we used a currentColor tint. Empirically 12% renders as
   a clearly darker band on saturated palettes and stays perceptible on
   muted ones. */
.mwmi-tablewrap thead tr {
  background: color-mix(in srgb, var(--paletteColor3, #333) 12%, transparent) !important;
}

/* Horizontal padding (16px) is intentionally larger than the previous 10/12px:
   with the header row now carrying a background fill, tight side-padding read
   as text crowding the fill's edge. th and td share the same 16px so column
   text stays vertically aligned between header and body. */
.mwmi-tablewrap th {
  text-align: left !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: 0.01em !important;
  padding: 12px 16px !important;
  color: var(--paletteColor3, #333) !important;
  border-bottom: 0.5px solid color-mix(in srgb, var(--paletteColor3, #333) 30%, transparent) !important;
}

.mwmi-tablewrap td {
  padding: 18px 16px !important;
  vertical-align: top !important;
  line-height: 1.5 !important;
  border-top: 0.5px solid color-mix(in srgb, currentColor 14%, transparent) !important;
  transition: background-color 0.15s ease;
}

/* First body row sits directly under the thead's own bottom border; avoid doubling. */
.mwmi-tablewrap tbody tr:first-child td {
  border-top: 0 !important;
}

/* Subtle row hover on desktop — helps the eye track across long descriptions.
   Gated on both pointer capability AND desktop width so the mobile card layout
   (triggered at <520px by width) never gets the hover, even on a tablet+mouse. */
@media (hover: hover) and (min-width: 520px) {
  .mwmi-tablewrap tbody tr:hover td {
    background: color-mix(in srgb, currentColor 3%, transparent) !important;
  }
}

/* Gauge-name cell: pulled out as the visual anchor of each row (display element,
   scoped size). Palette-colored so the reader's eye anchors on the four indexes.
   Sized at 20px — larger than body (15px) so it clearly anchors the row, but
   deliberately smaller than typical advisor-site H2 headings (~22–28px) so
   the gauge names don't outweigh section headings in the visual hierarchy.
   nowrap prevents "CPI-U" from breaking after the hyphen. */
.mwmi-tablewrap .mwmi-idx .mwmi-cell-val {
  display: block;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: var(--paletteColor3, #333) !important;
  white-space: nowrap;
}

/* Per-cell column labels for the mobile stacked view are stored in the
   data-mwmi-lbl attribute on each <td>, not in a child <span>. The mobile
   media query renders them via a ::before pseudo-element. Putting the label
   in an attribute rather than a hidden child element means environments
   that strip CSS (some CMS preview / BD views) render only the cell value,
   with no duplicated label-then-value string. Nothing to do at desktop —
   ::before isn't declared here, so it doesn't render. */

/* Emphasize the CPI-W row — the index that governs Social Security COLAs.
   Single-sided border, so radius stays 0.
   Currently unused (no .mwmi-hl class in HTML) — retained so the highlight
   can be reintroduced by adding class="mwmi-hl" to a row, no CSS re-upload. */
.mwmi-tablewrap .mwmi-hl td {
  background: color-mix(in srgb, var(--paletteColor3, #333) 8%, transparent) !important;
}

.mwmi-tablewrap .mwmi-hl td:first-child {
  border-left: 3px solid var(--paletteColor3, #333) !important;
  border-radius: 0 !important;
}

/* ---- Comparison table (mobile stacked cards) ----------------------------
   Below 520px the table reflows into one card per index. Each row becomes a
   block; each cell shows its column label above the value. All rules in this
   block target native table elements, so they all need !important. */
@media (max-width: 519px) {
  .mwmi-tablewrap table,
  .mwmi-tablewrap thead,
  .mwmi-tablewrap tbody,
  .mwmi-tablewrap tr,
  .mwmi-tablewrap td {
    display: block !important;
    width: auto !important;
  }

  .mwmi-tablewrap thead {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    overflow: hidden !important;
    height: 1px !important;
    width: 1px !important;
  }

  /* Match the desktop data card + table fill so mobile cards register as
     distinct modules against the page (figure-ground). Palette tint at 8%
     mirrors the desktop wrapper background. 12px radius matches the data
     card and the desktop table wrapper for a consistent corner language
     across all components. Border stays currentColor-tinted rather than
     palette-tinted so the card outline retains visual separation from the
     8% palette fill inside — a same-hue palette border on a palette fill
     would visually merge. */
  .mwmi-tablewrap tr {
    border: 0.5px solid color-mix(in srgb, currentColor 16%, transparent) !important;
    border-radius: 12px !important;
    padding: 4px 14px 12px !important;
    margin: 0 0 12px !important;
    background: color-mix(in srgb, var(--paletteColor3, #333) 6%, transparent) !important;
  }

  .mwmi-tablewrap td {
    border: 0 !important;
    padding: 10px 0 !important;
  }

  .mwmi-tablewrap td + td {
    border-top: 0.5px solid color-mix(in srgb, currentColor 10%, transparent) !important;
  }

  /* Column label injected from each <td>'s data-mwmi-lbl attribute. attr()
     as `content` is universally supported and screen readers on modern
     engines read generated content, matching the a11y of the previous
     visible-only-on-mobile span. */
  .mwmi-tablewrap td::before {
    content: attr(data-mwmi-lbl);
    display: block;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: color-mix(in srgb, currentColor 65%, transparent) !important;
    margin-bottom: 3px;
  }

  .mwmi-tablewrap .mwmi-cell-val {
    display: block;
    font-size: 15px !important;
  }

  /* Same 20px anchor size as desktop for consistency across breakpoints. */
  .mwmi-tablewrap .mwmi-idx .mwmi-cell-val {
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
    color: var(--paletteColor3, #333) !important;
  }

  /* Emphasize the CPI-W card as a whole on mobile. Currently unused.
     Applied to <tr>, which is a native element — !important stays. */
  .mwmi-tablewrap .mwmi-hl {
    background: color-mix(in srgb, var(--paletteColor3, #333) 8%, transparent) !important;
    border-left: 3px solid var(--paletteColor3, #333) !important;
    border-radius: 0 10px 10px 0 !important;
  }

  .mwmi-tablewrap .mwmi-hl td,
  .mwmi-tablewrap .mwmi-hl td:first-child {
    background: transparent !important;
    border-left: 0 !important;
  }
}

/* ---- Motion preference --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mwmi-datacard .mwmi-bar {
    transition: none;
  }
}

/* ---- Low-contrast palette fallback --------------------------------------
   script.js adds .mwmi-lowcontrast to #mwmi-datacard and #mwmi-table when
   the resolved --paletteColor3 fails WCAG large-text contrast (3.0:1)
   against the effective page background. Because detection runs after
   DOMContentLoaded, first paint uses the palette accent and then briefly
   neutralizes to currentColor on low-contrast sites. An inline-<script>
   variant that eliminates this flash was attempted but tripped an FMG CMS
   validation error on save; see fmg-cms-coding.SKILL.md ("Palette Contrast
   Fallback" + "When Something Fails to Save" #7) for the preserved inline
   pattern and the debugging status.

   The fallback strategy: neutralize the palette-colored *text* and the
   palette-tinted *borders*, but INTENTIONALLY leave the palette-tinted
   *backgrounds* (6% / 12%) alone. Reasoning: at 6–12% opacity a bright
   palette color renders as a pleasant pale wash even on white — pale yellow,
   pale mint, pale blue — that doesn't hurt legibility once the foreground
   text is neutralized to body-text color. Keeping the background tinted
   preserves palette identity in the composition; only the *text* moment
   is what needed contrast-corrected. Neutralizing text-and-background
   together would collapse the component into a fully generic grayscale
   card and lose the module's visual identity on the very sites where it
   most needs to stand out from prose (per the "show stopper" design goal).

   A prior version blended palette 50/50 with currentColor for text ("darken
   toward body text"). It technically passed contrast but produced perceived
   tan/olive tones that didn't feel designed. currentColor-only is cleaner:
   the accent disappears cleanly, size + weight still establish hierarchy. */

/* Text elements: swap palette color for body text color. */
.mwmi-datacard.mwmi-lowcontrast .mwmi-num,
.mwmi-tablewrap.mwmi-lowcontrast th,
.mwmi-tablewrap.mwmi-lowcontrast .mwmi-idx .mwmi-cell-val {
  color: currentColor !important;
}

/* Container borders: same opacity ratios as the base rules (22%/30%) but
   sourced from currentColor instead of --paletteColor3. Keeps the borders
   subtly visible while removing the palette tint. Base rules on the
   wrappers don't carry !important (surgical policy — decorative border on
   custom class), so compound-class specificity is enough. The th border-
   bottom's base rule *does* have !important, so this one needs !important
   to win. */
.mwmi-datacard.mwmi-lowcontrast,
.mwmi-tablewrap.mwmi-lowcontrast {
  border-color: color-mix(in srgb, currentColor 22%, transparent);
}

.mwmi-tablewrap.mwmi-lowcontrast th {
  border-bottom-color: color-mix(in srgb, currentColor 30%, transparent) !important;
}