/* The consolidated FinOps journey region, on both surfaces that ship it. Every
   value is one the FinOps family already ships next door, and no token, step
   or hue is declared here: var(--line), var(--surface) and var(--muted), which
   this file used to name, are defined in no stylesheet either page loads. DOM
   order is the reading order at every width; nothing sets `order`. */
.finops-journey { margin:24px 0; padding:24px; border:1px solid #cfcdc5; border-radius:16px; background:#fff; color:#172a2b; overflow-wrap:anywhere; }
/* h2 on the action center, h3 in evolution's answer region (#832). */
.fjc-head h2,.fjc-head h3 { margin:4px 0 8px; letter-spacing:-.02em; }
.fjc-headline,.fjc-metric,.fjc-decision,.fjc-checkpoint { margin:0 0 16px; }

/* One status voice for every label, kicker and state word; it also drops the
   metric label below the decision title that shared its h3 rule. */
.fjc-kicker,.fjc-phase-word,.fjc-disclosure-state,.fjc-chip-label,.fjc-slot-label,.fjc-support-title,.fjc-examples-label,.fjc-term { margin:0 0 6px; color:#55554f; font:750 10px/1.4 ui-monospace,monospace; letter-spacing:.07em; text-transform:uppercase; }
/* One secondary-prose voice wherever the region explains. */
.fjc-phase-copy,.fjc-metric-comparison,.fjc-rationale,.fjc-checkpoint-note,.fjc-checkpoint-source,.fjc-notice,.fjc-support-note,.fjc-empty,.fjc-detail { margin:6px 0 0; color:#55554f; font-size:14px; line-height:1.55; }
.fjc-notice,.fjc-support-note,.fjc-detail { margin:0 0 12px; }
.fjc-phase-word,.fjc-phase-copy,.fjc-disclosure-state,.fjc-chip-label,.fjc-empty { margin:0; }
.fjc-phase-shape,.fjc-chip-shape,.fjc-disclosure-shape { flex:none; font:800 14px/1 ui-monospace,monospace; }

/* Phase is a shape and a word before any tint, in the inks the chips give the
   same meanings. */
.fjc-phase { display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; margin:0 0 8px; }
.fjc-phase-copy { flex:1 1 16rem; }
.finops-journey[data-phase="verification_ready"] { border-left:4px solid #22634f; }
.finops-journey[data-phase="resumed_review"] { border-left:4px solid #765616; }
.finops-journey[data-phase="new_review"] { border-left:4px solid #55554f; }
.finops-journey[data-phase="degraded"] { border-left:4px solid #8a2d24; }

.fjc-examples { margin:0 0 12px; }
.fjc-examples-controls { display:flex; flex-wrap:wrap; gap:8px; }
.fjc-example { padding:6px 14px; border:1px solid #cfcdc5; border-radius:99px; background:#fff; color:#172a2b; font:inherit; font-size:14px; cursor:pointer; }

.fjc-headline { font-size:16px; font-weight:700; line-height:1.5; }
.fjc-metric-value { display:block; font-size:clamp(23px,3.4vw,30px); font-weight:800; line-height:1.2; letter-spacing:-.03em; }
.fjc-decision-title,.fjc-checkpoint-date { margin:0 0 4px; font-size:16px; font-weight:800; }
/* An anchor, sized as a touch target, on the family teal every sibling view
   gives its primary button. White on it is 4.87:1, 7.67:1 on hover. */
.fjc-action { display:inline-flex; align-items:center; min-height:48px; margin-top:8px; padding:0 22px; border-radius:10px; background:#087f76; color:#fff; font-weight:800; text-decoration:none; }

.fjc-checkpoint { padding:16px; border:1px solid #cfcdc5; border-radius:10px; }
.fjc-support { margin-top:16px; border-top:1px solid #dedcd5; padding-top:16px; }
.fjc-signals { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; padding:0; list-style:none; }
.fjc-signal { min-width:0; }
.fjc-chip { display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; max-width:100%; padding:8px 12px; border:1px solid transparent; border-radius:8px; background:#eeede7; }
.fjc-chip-value { min-width:0; font-size:14px; font-weight:700; line-height:1.4; }
.fjc-chip[data-tone="good"] { background:#dff4ee; color:#22634f; }
.fjc-chip[data-tone="caution"] { background:#fff7e8; color:#765616; }
.fjc-chip[data-tone="adverse"] { background:#fdeceb; color:#8a2d24; }
/* Not measured is its own silhouette, not a paler measured: one dashed edge
   wherever it occurs, and an unknown signal drops the wash. */
.fjc-chip[data-known="false"],.fjc-checkpoint[data-known="false"] { border-color:#8b8b85; border-style:dashed; }
.fjc-chip[data-known="false"] { background:#fff; color:#55554f; }

.fjc-disclosure { border-top:1px solid #dedcd5; }
.fjc-disclosure-trigger { display:flex; align-items:center; flex-wrap:wrap; gap:10px; width:100%; min-height:48px; padding:12px 0; border:0; background:none; color:#172a2b; font:inherit; font-size:16px; font-weight:800; text-align:left; cursor:pointer; }
.fjc-disclosure-label { flex:1 1 auto; min-width:0; }
.fjc-disclosure-panel { padding-bottom:12px; }
.fjc-facts { margin:0; }

/* One ring, one hover, one active for every control. The ring is the shipped
   --focus-ring, 6.72:1 on the white it lands on, not the navy this file named
   before — which was the action button's own fill. */
.fjc-action:focus-visible,.fjc-disclosure-trigger:focus-visible,.fjc-example:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.fjc-example:hover,.fjc-disclosure-trigger:hover { background:#eeede7; }
.fjc-action:hover { background:#0a5f52; }
.fjc-action:active,.fjc-disclosure-trigger:active,.fjc-example:active { filter:brightness(.94); }
/* Pressed is a weight, a wash and a border hue at once (6.17:1), stated last
   so hover cannot wash it out. The hue changes, not the width. */
.fjc-example[aria-pressed="true"] { border-color:#087f76; background:#dff4ee; color:#22634f; font-weight:800; }

/* Narrow: each chip takes the full measure rather than an ellipsis, and the
   metric clamps, so nothing restates its size. */
@media (max-width:760px) {
  .finops-journey { padding:16px; }
  .fjc-signals { display:block; }
  .fjc-signal { margin-bottom:8px; }
  .fjc-chip { display:flex; width:100%; }
  .fjc-action { width:100%; justify-content:center; }
}