/* Calm Instrument Slice 4: the customer page as one account-intelligence page. Tokens only. Everything is scoped to
   .cp, the page root rendered only with the Decision Experience on, so the Decision-off page and the staff client
   page (which share the Opportunity, Meaningful Change and history panels) are untouched.

   One restrained surface (the Decision summary); everything else is sections on hairlines, not boxes in boxes.
   Attention may be gold, the one primary action lime; Commercial never competes with either, and a price is never
   the largest thing in its section. Shared panels keep their own palettes (.oi-section, .co-section, .mcw). */

.cp :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cp [tabindex="-1"]:focus { outline: none; }

/* ---- Head ---- */
.cp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s3) var(--s6); margin: 0 0 var(--s5); }
.portal-main .cp-head h1 { margin: 0 0 4px; }
.cp-meta { margin: 0; font-size: var(--fs-sm); color: var(--muted); }

/* ---- Decision summary: the one band ---- */
.cp .cp-band { margin: 0 0 var(--s5); padding: var(--s5) var(--s6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.cp-band-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4) var(--s6); }
.cp-band-tier { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s3); }
.cp-band-tier .dx-tier { font-size: var(--fs-sm); letter-spacing: 0; text-transform: none; font-weight: var(--fw-strong); }
.cp-reason { font-size: var(--fs-sm); color: var(--text-2); }
.cp .cp-band .dx-why { margin: var(--s2) 0 0; max-width: 72ch; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; color: var(--text); }
.cp .cp-band .cp-band-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4) var(--s6); margin: var(--s5) 0 0; padding: var(--s4) 0 0; border-top: 1px solid var(--line); font-size: var(--fs-control); }
.cp .cp-band dt { color: var(--muted); font-size: var(--fs-sm); }
.cp .cp-band dd { margin: 4px 0 0; color: var(--text); font-weight: 600; }
.cp-fs { display: block; margin-top: 2px; font-size: var(--fs-sm); font-weight: var(--fw-body); color: var(--text-2); }
.cp-band .dx-imp { font-size: inherit; letter-spacing: 0; text-transform: none; font-weight: var(--fw-strong); }
.cp-hist { display: inline-block; margin-top: 4px; }
.cp-band-more { margin: var(--s3) 0 0; font-size: var(--fs-sm); }

/* ---- On this page ---- */
.cp-nav { display: flex; gap: var(--s6); margin: 0 0 var(--s2); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.portal-main .cp-nav a { display: inline-flex; align-items: center; min-height: var(--h-touch); white-space: nowrap; color: var(--text-2);
    font-size: var(--fs-control); font-weight: 600; text-decoration: none; }
.portal-main .cp-nav a:hover { color: var(--text); }

/* ---- Sections ---- */
.cp-sec { margin: var(--s8) 0 0; }
.cp-sechead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s4); margin: 0 0 var(--s4); padding: 0 0 var(--s3); border-bottom: 1px solid var(--line); }
.portal-main .cp-sechead h2 { margin: 0; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.cp-only { margin-left: auto; font-size: var(--fs-meta); color: var(--muted); }
.cp-none { margin: 0; max-width: 72ch; color: var(--text-2); }

/* What changed: the stories first; what Vitals could see (not changes in the tenant) after, quieter. */
.cp .mcw-switch { margin-bottom: var(--s2); }
.cp .mcw-switch button.on { background: var(--raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.cp .mcw-story { padding: 0 0 var(--s4) 16px; border: 0; background: transparent; } /* 16px keeps the tone bar (::before, left 0) off the text */
.cp .mcw-group { margin-top: var(--s5); color: var(--muted); }

/* Opportunities: needs, not cards. Importance and state are words; Actionable is never lime. */
.cp .oi-opp, .cp .oi-lead { margin-top: 0; padding: var(--s5) 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.cp .oi-conv { margin-top: var(--s2); padding: 0; background: transparent; }
.cp .oi-unlocks > .oi-opp { margin: var(--s3) 0 0; padding: var(--s3) 0; border: 0; }        /* the panel's own unlock rule carries the indent */
.cp .oi-imp { font-size: var(--fs-sm); letter-spacing: 0; text-transform: none; }
.cp .oi-ai { border-color: var(--line-unknown); }                         /* clarification: unknown, never failure */
.cp .oi-opsb, .cp .oi-evb { background: transparent; }

/* Commercial: For {need} first, then the service, its state, and the price — the price never the largest thing. */
.portal-main .cp .co-section.pcard { margin-top: var(--s8); padding: 0; border: 0; border-radius: 0; background: transparent; }
.cp .co-hd { margin: 0 0 var(--s3); padding: 0 0 var(--s3); border-bottom: 1px solid var(--line); }
.portal-main .cp .co-hd h2.label { margin: 0 !important; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 800; letter-spacing: -.01em; text-transform: none; color: var(--text); }
.cp .co-opt { display: flex; flex-direction: column; margin-top: 0; padding: var(--s5) 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.cp .co-opt-muted { border-bottom-style: dashed; }
.cp .co-for { order: -1; margin: 0 0 6px; font-size: var(--fs-sm); color: var(--muted); }
.cp .co-name { font-size: var(--fs-heading); }
.cp .co-prices { padding: 0; background: transparent; }
.cp .co-amt { font-size: var(--fs-control); }
.cp .co-btn-pri, .cp .co-btn-pri:hover { background: transparent; border-color: var(--line-strong); color: var(--text); }   /* a commercial action is secondary: the page's one lime action is Prepare */

/* Supporting detail: lighter, still all there. */
.cp .cp-facts { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4) var(--s7); margin: 0; }
.cp .cp-fact dt { font-size: var(--fs-sm); color: var(--muted); }
.cp .cp-fact dd { margin: 4px 0 0; }
.cp .cp-fact p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.cp .cp-fact .big { margin: 0 0 4px; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 800; color: var(--text); }
.cp .cp-fact .big.bad { color: var(--error); }
.cp .cp-fact .big.held { color: var(--caution); }
.cp .cp-fact .big.muted { color: var(--muted); }
.cp .cp-fact .big .unit { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.cp .hint { font-size: var(--fs-sm); color: var(--muted); }
.cp-part { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); }
.portal-main .cp-part > h3 { margin: 0 0 var(--s3); font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: 800; color: var(--text); }
.cp-part > p, .cp-part > div > p { margin: 0; max-width: 72ch; font-size: var(--fs-control); line-height: 1.65; color: var(--text-2); }
.cp-part > p + p { margin-top: 10px; }
.cp .obanner { padding: 0; background: transparent; font-size: var(--fs-heading); }
.cp .oblk { background: transparent; }
.cp .rung-met { background: var(--tint-progress); border-color: var(--line-progress); }
.cp .cap h3 { font-size: var(--fs-control); }
.portal-main .cp .mcw-hist a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.cp .st-good { background: var(--tint-progress); border-color: var(--line-progress); }

@media (max-width: 900px) {
    .cp .cp-band .cp-band-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cp .cp-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .cp .cp-fact-score { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .cp .cp-band { padding: var(--s4); }
    .cp-band-top { flex-direction: column; align-items: stretch; }
    .cp-band-top .ci-btn { width: 100%; min-height: var(--h-touch); }
    .cp .cp-band .dx-why { font-size: var(--fs-heading); line-height: var(--lh-heading); }
    .cp .cp-band .cp-band-facts { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
    .cp .cp-facts { grid-template-columns: minmax(0, 1fr); }
    .cp-head .ci-btn { width: 100%; min-height: var(--h-touch); }
    .cp-only { margin-left: 0; }
}