/* Symphora · Multi-currency FX disclosure system.
   A converted money figure carries two identities: its NATIVE value
   (what was actually paid/billed) and its REPORTING value (converted into
   the org rollup currency for summing). This kit makes that duality legible
   without cluttering the 95% of views that are single-currency.

   Reuse, don't invent: the marker is a variant of the existing
   `.cost-hero__src` source caption — "every figure traces to where it's set".
   Pair with tokens.css + components.css + proj-ui.css. Vanilla, no deps. */

/* ====== The marker ======================================================
   `.fx` wraps the ≈ affordance that sits beside a converted figure.
   It is the hover/focus target for the disclosure popover. Three treatments
   are provided (glyph / chip / underline); the product default is --glyph. */
.fx {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--font-mono);
  cursor: help;
  vertical-align: baseline;
  -webkit-user-select: none; user-select: none;
}
.fx:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

/* ---- Treatment A · subtle ≈ glyph (DEFAULT) ---- */
.fx--glyph .fx__g {
  font-size: 0.84em; line-height: 1;
  color: var(--ink-3);
  border-bottom: 1px dotted var(--ink-4);
  padding-bottom: 1px;
  transition: color .12s var(--ease);
}
.fx--glyph:hover .fx__g { color: var(--accent-ink); border-bottom-color: var(--accent-line); }

/* ---- Treatment B · "conv." outline chip ---- */
.fx--chip .fx__c {
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 500;
  padding: 1px 5px; border-radius: var(--r-full);
  border: 1px solid var(--line); color: var(--ink-3);
  line-height: 1.5;
}
.fx--chip:hover .fx__c { border-color: var(--accent-line); color: var(--accent-ink); }

/* ---- Treatment C · dotted underline on the figure itself ---- */
.fx--underline { gap: 1px; }
.fx--underline .fx__u {
  border-bottom: 1.5px dotted var(--ink-4);
  padding-bottom: 1px;
}
.fx--underline .fx__sup { font-size: 0.62em; color: var(--ink-3); vertical-align: super; }
.fx--underline:hover .fx__u { border-bottom-color: var(--accent-line); }

/* ---- State tones (apply to any treatment) ---- */
.fx[data-fx="stale"] .fx__g,
.fx[data-fx="stale"] .fx__sup { color: var(--warn-ink); border-bottom-color: var(--warn); }
.fx[data-fx="stale"] .fx__c   { color: var(--warn-ink); border-color: var(--warn); background: var(--warn-soft); }
.fx[data-fx="stale"]:hover .fx__g { color: var(--warn-ink); }

.fx[data-fx="norate"] .fx__g,
.fx[data-fx="norate"] .fx__sup { color: var(--bad-ink); border-bottom-color: var(--bad); }
.fx[data-fx="norate"] .fx__c   { color: var(--bad-ink); border-color: var(--bad); background: var(--bad-soft); }

/* A figure that can't be converted: native value + a clear nudge, never a guess. */
.fx-norate {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.fx-norate__nudge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  padding: 1px 7px; border-radius: var(--r-full);
  background: var(--warn-soft); color: var(--warn-ink);
  text-transform: none; font-family: var(--font-sans);
}
.fx-norate__nudge svg { width: 11px; height: 11px; }
.fx-norate__nudge a, a.fx-norate__nudge { color: inherit; }

/* ====== The disclosure popover =========================================
   Native amount · rate · rate date · source. Built by fx.js on hover/focus.
   Shares the elevated-surface shell with proj-ui's .pu-pop. */
.fx-pop {
  position: fixed; z-index: 80;
  width: 268px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 0; overflow: hidden;
  opacity: 0; transform: translateY(4px);
  transition: opacity .13s var(--ease), transform .13s var(--ease);
  pointer-events: none;
}
.fx-pop[data-open="true"] { opacity: 1; transform: translateY(0); pointer-events: auto; }
.fx-pop__conv {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--line-2);
  background: var(--paper-2);
}
.fx-pop__amt   { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-base); font-weight: 600; color: var(--ink); }
.fx-pop__amt--native { color: var(--ink-2); font-weight: 500; }
.fx-pop__arrow { color: var(--ink-4); flex-shrink: 0; }
.fx-pop__arrow svg { width: 14px; height: 14px; }
.fx-pop__rows { padding: 8px 14px 10px; }
.fx-pop__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 3px 0; font-size: var(--t-sm);
}
.fx-pop__k { color: var(--ink-3); font-family: var(--font-sans); }
.fx-pop__v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }
.fx-pop__v--mut { color: var(--ink-3); font-weight: 400; }
.fx-pop__lock { display: inline-flex; align-items: center; gap: 4px; }
.fx-pop__lock svg { width: 11px; height: 11px; color: var(--ink-4); }
.fx-pop__warn {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0; padding: 9px 14px;
  background: var(--warn-soft); color: var(--warn-ink);
  font-size: var(--t-sm); line-height: 1.45;
  border-bottom: 1px solid var(--line-2);
}
.fx-pop__warn svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.fx-pop__warn--bad { background: var(--bad-soft); color: var(--bad-ink); }
.fx-pop__foot {
  padding: 9px 14px; border-top: 1px solid var(--line-2);
  font-size: 11px; color: var(--ink-3); line-height: 1.4;
}
.fx-pop__foot a { color: var(--accent-ink); font-weight: 600; }

/* ====== Reporting ↔ native toggle (dashboard header control) ===========
   "Show in: [Reporting · USD ▾]" — built as a quiet button that opens a
   proj-ui popover. The chip styling matches .btn--sm but flags the active
   currency in mono. */
.fx-cur-btn { gap: 7px; }
.fx-cur-btn .fx-cur-btn__ccy { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.fx-cur-btn svg { color: var(--ink-3); }

/* ====== Multi-currency progressive disclosure ==========================
   When the org is single-currency, every FX affordance is hidden so the
   default view carries ZERO added clutter. Toggle by setting
   data-fx-org="single" | "multi" on <body>. */
body[data-fx-org="single"] [data-fx-only="multi"] { display: none !important; }

/* A small "native" badge for rows whose native ≠ reporting, used in dense
   tables to flag the currency before the reader even hovers. */
.fx-ccy {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.04em;
  padding: 1px 5px; border-radius: var(--r-sm);
  background: var(--paper-3); color: var(--ink-3);
}
.fx-ccy--report { background: var(--accent-soft); color: var(--accent-ink); }

/* Legend / reference page bits (only used on pms2-fx-legend.html) */
.fx-spec {
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--paper); overflow: hidden;
}
.fx-spec__head { padding: 13px 18px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fx-spec__title { font-size: var(--t-md); font-weight: 600; }
.fx-spec__sub { font-size: var(--t-sm); color: var(--ink-3); margin-top: 2px; }
.fx-spec__body { padding: 18px; }

.fx-states { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line-2); }
@media (max-width: 720px) { .fx-states { grid-template-columns: 1fr; } }
.fx-state {
  padding: 18px 20px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
.fx-state:nth-child(2n) { border-right: 0; }
.fx-state__tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.fx-state__tag .dot { margin: 0; }
.fx-state__fig { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin: 12px 0 8px; display: flex; align-items: baseline; gap: 6px; }
.fx-state__desc { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; max-width: 42ch; }
.fx-state__desc b { color: var(--ink); font-weight: 600; }

.fx-treat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .fx-treat { grid-template-columns: 1fr; } }
.fx-treat__card { border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 16px 16px 14px; position: relative; }
.fx-treat__card[data-rec="true"] { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); }
.fx-treat__rec { position: absolute; top: 12px; right: 12px; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600; padding: 2px 7px; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-ink); }
.fx-treat__name { font-size: var(--t-sm); font-weight: 600; }
.fx-treat__k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.fx-treat__demo { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; padding: 14px 0 16px; display: flex; align-items: baseline; gap: 6px; }
.fx-treat__note { font-size: 12px; color: var(--ink-2); line-height: 1.5; border-top: 1px solid var(--line-2); padding-top: 11px; }
.fx-treat__note b { color: var(--ink); }

.fx-legend-row { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-2); }
.fx-legend-row:last-child { border-bottom: 0; }
.fx-legend-row__term { width: 168px; flex-shrink: 0; font-weight: 600; font-size: var(--t-base); color: var(--ink); }
.fx-legend-row__term .mono { display: block; font-size: 10px; color: var(--ink-3); font-weight: 400; letter-spacing: 0.03em; margin-top: 2px; }
.fx-legend-row__def { font-size: var(--t-base); color: var(--ink-2); line-height: 1.55; }
.fx-legend-row__def code { font-family: var(--font-mono); font-size: 0.88em; background: var(--paper-3); padding: 1px 5px; border-radius: var(--r-sm); color: var(--ink); }