/* ============================================================================
   mgc.css · Mity for MGC-ASIA — the automotive-specific scene styles.
   Builds on kit.css tokens and reuses the exec- and prep- primitives, adding only
   what the nine requirement engines genuinely need:
     cap-*  Voice-to-CRM + the data-quality gate      (REQ 1 + 2 at entry)
     enr-*  Lead enrichment, PDPA-governed            (REQ 3)
     co-*   Sales coach queue / message / objections   (REQ 4)
     dq-*   Team data-quality & anomaly board          (REQ 2)
     spi-*  Sales performance intelligence + funnel    (REQ 5)
     rp-*   Auto-generated KPI report                  (REQ 6)
     xf-*   Cross-functional: stock × marketing        (REQ 8)
     tsp-*  360 performance × training × HR            (REQ 9)
   ========================================================================== */

/* ============================== shared ============================== */
.mg { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; background: var(--softer); padding: 20px 24px 44px; }
.mg__inner { max-width: 1180px; margin: 0 auto; }
.mg__inner--wide { max-width: 1360px; }

.mg__head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 15px; }
.mg__title h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 1.2rem + .8vw, 28px); letter-spacing: -.02em; }
.mg__title p { font-size: 12.5px; color: var(--text-soft); margin-top: 3px; max-width: 660px; line-height: 1.5; }
.mg__req { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mint-ink); background: var(--mint-tint); padding: 4px 10px; border-radius: 999px; margin-bottom: 7px; }
.mg__ctrls { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.mg__load { display: flex; align-items: center; gap: 10px; padding: 13px 16px; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); font-size: 13px; color: var(--text-2); }
.mg__spin .mi { width: 16px; height: 16px; color: var(--mint-700); animation: mg-spin 1s linear infinite; }
@keyframes mg-spin { to { transform: rotate(360deg); } }
.mg__empty { color: var(--text-soft); font-size: 13.5px; line-height: 1.75; text-align: center; padding: 46px 20px; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-lg); }
.mg__empty b { color: var(--text-1); }
.mg__err { background: var(--danger-soft); color: #b42318; border-radius: var(--r-md); padding: 13px 16px; font-size: 13px; }

/* section heading inside a scene */
.mg-sec { display: flex; align-items: center; gap: 9px; margin: 20px 0 10px; }
.mg-sec .mi { width: 17px; height: 17px; color: var(--mint-700); }
.mg-sec b { font-family: var(--font-display); font-weight: 800; font-size: 14.5px; }
.mg-sec span { font-size: 11.5px; color: var(--text-soft); }
.mg-sec__n { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--mint-700); }

/* the AI read callout used at the bottom of most scenes */
.mg-read { display: flex; gap: 10px; align-items: flex-start; padding: 13px 15px; border-radius: var(--r-md); font-size: 13.5px; line-height: 1.6; background: var(--mint-tint-2); border-left: 3px solid var(--mint); margin-top: 14px; }
.mg-read .mi { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--mint-700); }
.mg-warn { background: var(--danger-soft); border-left-color: var(--danger); }
.mg-warn .mi { color: #b42318; } .mg-warn b { color: #b42318; }
.mg-caveat { background: var(--warn-soft); border-left-color: var(--warn); }
.mg-caveat .mi { color: #92590b; } .mg-caveat b { color: #92590b; }

/* status + severity pills */
.mg-sev { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .06em; padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.mg-sev.crit { background: var(--danger-soft); color: #b42318; }
.mg-sev.warn { background: var(--warn-soft); color: #92590b; }
.mg-sev.ok { background: var(--mint-tint); color: var(--mint-ink); }
.mg-kind { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; background: var(--soft); color: var(--text-dim); white-space: nowrap; }
.mg-kind.discipline { background: #ede9fe; color: #6d28d9; }
.mg-kind.quality { background: var(--info-soft); color: var(--info); }
.mg-kind.performance { background: #fce7f3; color: #be185d; }
.mg-conf { font-family: var(--font-mono); font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.mg-conf.high { background: var(--mint-tint); color: var(--mint-ink); }
.mg-conf.med { background: var(--warn-soft); color: #92590b; }
.mg-conf.low { background: var(--danger-soft); color: #b42318; }

/* a source link chip (enrichment / auditability) */
.mg-src { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 10px; color: var(--info); background: var(--info-soft); padding: 2px 7px; border-radius: 5px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-src:hover { text-decoration: underline; }
.mg-src .mi { width: 11px; height: 11px; flex: none; }

/* a labelled 0-100 meter */
.mg-meter { height: 7px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.mg-meter i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--mint-600), var(--mint)); transition: width .9s cubic-bezier(.2,.7,.2,1); }
.mg-meter.warn i { background: linear-gradient(90deg, #e9b949, var(--warn)); }
.mg-meter.crit i { background: linear-gradient(90deg, #ef6b5e, var(--danger)); }

/* staged pipeline ticker (search / analysis lifecycle) */
.mg-stages { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.mg-stage { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-soft); padding: 8px 12px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line-soft); }
.mg-stage .mi { width: 15px; height: 15px; flex: none; }
.mg-stage.is-active { color: var(--text-1); border-color: var(--mint); background: var(--mint-tint-2); }
.mg-stage.is-active .mi { color: var(--mint-700); animation: mg-spin 1.1s linear infinite; }
.mg-stage.is-done { color: var(--text-dim); }
.mg-stage.is-done .mi { color: var(--mint-700); }

/* ============================== REQ 1 · Voice-to-CRM ============================== */
.cap__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 16px; align-items: start; }
@media (max-width: 1080px) { .cap__grid { grid-template-columns: 1fr; } }

/* left: the raw note as it really arrives */
.cap-note { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow-sm); position: sticky; top: 0; }
.cap-note__h { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.cap-note__h .mi { width: 17px; height: 17px; color: var(--mint-700); }
.cap-note__h b { font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.cap-note__h span { font-size: 11px; color: var(--text-soft); margin-left: auto; }
.cap-ta { width: 100%; min-height: 168px; resize: vertical; border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 13px; font-size: 13.5px; line-height: 1.65; background: var(--softer); color: var(--text-1); outline: none; transition: border-color .15s, box-shadow .15s; }
.cap-ta:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(4,190,140,.14); background: var(--surface); }
.cap-ta::placeholder { color: var(--text-soft); }
.cap-note__row { display: flex; align-items: center; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.cap-mic { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; transition: transform .15s, box-shadow .15s, background .2s; }
.cap-mic .mi { width: 19px; height: 19px; }
.cap-mic:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.cap-mic.is-live { background: var(--danger); animation: cap-pulse 1.3s ease-in-out infinite; }
@keyframes cap-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.5); } 60% { box-shadow: 0 0 0 12px rgba(220,38,38,0); } }
.cap-samples { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.cap-samples__lab { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-soft); }
.cap-sample { text-align: left; font-size: 12px; line-height: 1.5; color: var(--text-2); background: var(--softer); border: 1px solid var(--line-soft); border-radius: 10px; padding: 9px 11px; transition: border-color .15s, background .15s, transform .12s; }
.cap-sample:hover { border-color: var(--mint); background: var(--mint-tint-2); transform: translateX(2px); }
.cap-sample b { display: block; font-size: 11px; color: var(--mint-ink); font-family: var(--font-mono); margin-bottom: 2px; }

/* right: the CRM record Mity built */
.cap-out { display: flex; flex-direction: column; gap: 13px; }
.cap-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow-sm); animation: lab-up .45s cubic-bezier(.2,.7,.2,1) backwards; }
.cap-heard { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.55; color: var(--text-2); background: var(--softer); border-radius: var(--r-md); padding: 10px 12px; }
.cap-heard .mi { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--text-soft); }

/* the gate: completeness before → after */
.cap-gate { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.cap-gate__jump { display: flex; align-items: baseline; gap: 7px; }
.cap-gate__from { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--danger); }
.cap-gate__arrow { color: var(--text-soft); }
.cap-gate__to { font-family: var(--font-display); font-weight: 800; font-size: 38px; letter-spacing: -.02em; color: var(--mint-ink); }
.cap-gate__lab { font-size: 10.5px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .05em; }
.cap-gate__mid { min-width: 0; }
.cap-gate__verdict { font-size: 12.5px; line-height: 1.5; color: var(--text-2); margin-top: 7px; }
.cap-gate__block { text-align: center; padding: 9px 14px; border-radius: var(--r-md); background: var(--danger-soft); }
.cap-gate__block b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 22px; color: #b42318; line-height: 1; }
.cap-gate__block span { font-size: 9.5px; color: #b42318; text-transform: uppercase; letter-spacing: .04em; }
.cap-gate__block.is-clear { background: var(--mint-tint); }
.cap-gate__block.is-clear b, .cap-gate__block.is-clear span { color: var(--mint-ink); }

/* extracted field rows */
.cap-fields { display: flex; flex-direction: column; gap: 1px; background: var(--line-soft); border-radius: var(--r-md); overflow: hidden; }
.cap-field { display: grid; grid-template-columns: 132px 1fr auto; gap: 11px; align-items: center; background: var(--surface); padding: 10px 13px; font-size: 13px; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s; }
.cap-field.is-in { opacity: 1; transform: none; }
.cap-field__k { font-size: 11.5px; color: var(--text-soft); }
.cap-field__v { font-weight: 600; color: var(--text-1); min-width: 0; overflow-wrap: anywhere; }
.cap-field__v .cap-null { font-weight: 500; color: var(--text-soft); font-style: italic; }
.cap-field__r { display: inline-flex; align-items: center; gap: 6px; }
.cap-field.missing { background: var(--danger-soft); }
.cap-field.missing .cap-field__k { color: #b42318; }
.cap-field.vague { background: var(--warn-soft); }
.cap-field.conflict { background: #ffe4e6; }
.cap-field__why { grid-column: 2 / -1; font-size: 11.5px; color: var(--text-dim); line-height: 1.45; margin-top: -3px; }
.cap-st { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; }
.cap-st.ok { background: var(--mint-tint); color: var(--mint-ink); }
.cap-st.vague { background: var(--warn-soft); color: #92590b; }
.cap-st.missing { background: var(--danger-soft); color: #b42318; }
.cap-st.conflict { background: #ffe4e6; color: #9f1239; }

/* ask-back: the questions the AI sends the SC back to the customer with */
.cap-asks { display: flex; flex-direction: column; gap: 9px; }
.cap-ask { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--mint-tint-2), var(--surface)); border: 1px solid #cdeede; }
.cap-ask__n { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--mint); color: #fff; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
.cap-ask__b { min-width: 0; }
.cap-ask__q { font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--text-1); }
.cap-ask__why { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }
.cap-ask__f { font-family: var(--font-mono); font-size: 9.5px; color: var(--mint-ink); background: var(--mint-tint); padding: 2px 7px; border-radius: 5px; flex: none; }

/* propensity */
.cap-prop { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.cap-prop__lists { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-size: 12.5px; }
.cap-prop__col b { display: block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.cap-prop__col--for b { color: var(--mint-ink); }
.cap-prop__col--against b { color: #b42318; }
.cap-prop__col li { display: flex; gap: 6px; color: var(--text-2); line-height: 1.5; margin-bottom: 4px; }
.cap-prop__col li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex: none; margin-top: 7px; background: currentColor; opacity: .5; }
.cap-band { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.cap-band.hot { background: var(--danger-soft); color: #b42318; }
.cap-band.warm { background: var(--warn-soft); color: #92590b; }
.cap-band.cold { background: var(--info-soft); color: var(--info); }

/* the write-to-CRM confirm bar */
.cap-save { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--r-lg); background: var(--ink); color: #fff; }
.cap-save__b { min-width: 0; flex: 1; }
.cap-save__t { font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.cap-save__m { font-size: 11.5px; color: #9fb3aa; margin-top: 2px; }
.cap-save__btn { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; padding: 11px 20px; border-radius: 999px; background: var(--mint); color: #04150f; transition: transform .15s, box-shadow .15s; }
.cap-save__btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(4,190,140,.4); }
.cap-save__btn .mi { width: 16px; height: 16px; }
.cap-save.is-done { background: var(--mint-ink); }
.cap-save__saved { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #04150f; background: #8fe6c9; padding: 9px 16px; border-radius: 999px; }
.cap-save__saved .mi { width: 15px; height: 15px; }

/* ============================== REQ 3 · Enrichment ============================== */
.enr-search { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 13px 15px; box-shadow: var(--shadow-sm); margin-bottom: 14px; }
.enr-search input { flex: 1; min-width: 200px; border: 1px solid var(--line); border-radius: 999px; padding: 10px 15px; font-size: 13.5px; outline: none; background: var(--softer); transition: border-color .15s, box-shadow .15s; }
.enr-search input:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(4,190,140,.14); background: var(--surface); }
.enr-known { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.enr-known__lab { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-soft); align-self: center; }
.enr-chip { font-size: 12px; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; transition: border-color .15s, color .15s, transform .12s; }
.enr-chip:hover { border-color: var(--mint); color: var(--mint-ink); transform: translateY(-1px); }

.enr-resolved { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); margin-bottom: 13px; }
.enr-resolved__ic { width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--mint-tint); display: grid; place-items: center; }
.enr-resolved__ic .mi { width: 19px; height: 19px; color: var(--mint-700); }
.enr-resolved.is-empty .enr-resolved__ic { background: var(--warn-soft); }
.enr-resolved.is-empty .enr-resolved__ic .mi { color: #92590b; }
.enr-resolved__b { min-width: 0; flex: 1; }
.enr-resolved__b b { font-family: var(--font-display); font-weight: 800; font-size: 14.5px; display: block; }
.enr-resolved__b span { font-size: 12px; color: var(--text-soft); }

.enr-prof { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 11px; }
.enr-fld { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; box-shadow: var(--shadow-sm); animation: lab-up .4s cubic-bezier(.2,.7,.2,1) backwards; }
.enr-fld__k { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.enr-fld__v { font-size: 14px; font-weight: 700; color: var(--text-1); line-height: 1.4; overflow-wrap: anywhere; }
.enr-fld__m { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.enr-fld__note { font-size: 11.5px; color: var(--text-dim); margin-top: 5px; line-height: 1.45; }
.enr-basis { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; background: var(--soft); color: var(--text-dim); }
.enr-consent { font-family: var(--font-mono); font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 5px; }
.enr-consent.free { background: var(--mint-tint); color: var(--mint-ink); }
.enr-consent.req { background: var(--warn-soft); color: #92590b; }
.enr-consent.no { background: var(--danger-soft); color: #b42318; }

/* PDPA block: what we deliberately will NOT return */
.enr-block { background: var(--surface); border: 1px solid #f3c4bf; border-left: 3px solid var(--danger); border-radius: var(--r-md); padding: 13px 15px; }
.enr-block__h { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: 13px; color: #b42318; margin-bottom: 8px; }
.enr-block__h .mi { width: 16px; height: 16px; }
.enr-block__row { font-size: 12.5px; color: var(--text-2); line-height: 1.55; padding: 5px 0; border-top: 1px solid var(--line-soft); }
.enr-block__row:first-of-type { border-top: 0; }
.enr-block__row b { color: var(--text-1); }

.enr-afford { background: linear-gradient(135deg, #f5f3ff, var(--surface)); border: 1px solid #ddd6fe; border-radius: var(--r-lg); padding: 15px 16px; }
.enr-afford__band { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.01em; color: #5b21b6; }
.enr-afford__from { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0; }
.enr-afford__from span { font-size: 11.5px; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.enr-afford__dis { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; font-style: italic; border-top: 1px solid var(--line-soft); padding-top: 8px; }

.enr-fit { display: flex; flex-direction: column; gap: 9px; }
.enr-fit__row { display: flex; align-items: center; gap: 11px; padding: 11px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.enr-fit__row b { font-family: var(--font-display); font-weight: 800; font-size: 13.5px; flex: none; }
.enr-fit__row span { font-size: 12.5px; color: var(--text-2); }

.enr-delta { display: flex; align-items: center; gap: 14px; padding: 13px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.enr-delta__n { display: flex; align-items: baseline; gap: 8px; }
.enr-delta__a { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--text-soft); }
.enr-delta__b { font-family: var(--font-display); font-weight: 800; font-size: 34px; color: var(--mint-ink); letter-spacing: -.02em; }
.enr-delta__w { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }

/* ============================== REQ 4 · Sales coach ============================== */
.co-queue { display: flex; flex-direction: column; gap: 10px; }
.co-card { display: grid; grid-template-columns: 34px 1fr auto; gap: 13px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--r-md); padding: 13px 15px; box-shadow: var(--shadow-sm); animation: lab-up .4s cubic-bezier(.2,.7,.2,1) backwards; transition: transform .15s, box-shadow .15s; }
.co-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.co-card.crit { border-left-color: var(--danger); }
.co-card.warn { border-left-color: var(--warn); }
.co-card.ok { border-left-color: var(--mint); }
.co-card__rank { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--soft); font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--text-dim); }
.co-card.crit .co-card__rank { background: var(--danger-soft); color: #b42318; }
.co-card__b { min-width: 0; }
.co-card__t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.co-card__t b { font-family: var(--font-display); font-weight: 800; font-size: 14.5px; }
.co-card__model { font-size: 12px; color: var(--text-soft); }
.co-card__stage { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--soft); color: var(--text-dim); padding: 2px 7px; border-radius: 5px; }
.co-card__why { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin-top: 4px; }
.co-card__do { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; margin-top: 8px; padding: 9px 11px; background: var(--mint-tint-2); border-radius: 9px; }
.co-card__do .mi { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--mint-700); }
.co-card__do b { color: var(--mint-ink); }
.co-card__r { text-align: right; flex: none; }
.co-card__prop { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1; }
.co-card__prop.hot { color: #b42318; } .co-card__prop.warm { color: #92590b; } .co-card__prop.cold { color: var(--info); }
.co-card__proplab { font-size: 9.5px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; }
.co-card__val { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text-1); margin-top: 6px; }
.co-card__when { font-size: 10.5px; color: var(--text-soft); margin-top: 2px; }

.co-msg { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 15px 16px; box-shadow: var(--shadow-sm); }
.co-msg__h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 11px; }
.co-msg__h b { font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.co-msg__chan { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #e8f5e9; color: #1b5e20; }
.co-msg__copy { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-dim); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; transition: border-color .15s, color .15s; }
.co-msg__copy:hover { border-color: var(--mint); color: var(--mint-ink); }
.co-msg__copy.is-done { border-color: var(--mint); color: var(--mint-ink); background: var(--mint-tint); }
.co-msg__copy .mi { width: 14px; height: 14px; }
.co-msg__draft { white-space: pre-wrap; font-size: 13.5px; line-height: 1.72; color: var(--text-1); background: #dcf8c6; border-radius: 14px 14px 14px 4px; padding: 13px 15px; max-width: 560px; }
.co-msg__why { font-size: 12px; color: var(--text-dim); margin-top: 9px; line-height: 1.5; }

.co-obj { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 11px; }
.co-obj__c { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 15px; box-shadow: var(--shadow-sm); }
.co-obj__q { font-size: 13.5px; font-weight: 700; color: #b42318; line-height: 1.5; padding-left: 11px; border-left: 3px solid var(--danger); }
.co-obj__row { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.55; margin-top: 9px; color: var(--text-2); }
.co-obj__row .mi { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--mint-700); }
.co-obj__row b { color: var(--text-1); }
.co-obj__ask { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line-soft); font-size: 13px; font-weight: 600; color: var(--mint-ink); }

.co-gap { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 15px 16px; box-shadow: var(--shadow-sm); }
.co-gap__c b { display: block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 5px; }
.co-gap__c span { font-size: 13px; line-height: 1.55; color: var(--text-1); }

/* ============================== REQ 2 · Data quality board ============================== */
.dq-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; margin-bottom: 15px; }
.dq-score { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow-sm); animation: lab-up .45s cubic-bezier(.2,.7,.2,1) backwards; }
.dq-score__v { display: flex; align-items: baseline; gap: 5px; }
.dq-score__v b { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -.02em; line-height: 1; }
.dq-score__v i { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--text-soft); }
.dq-score.crit .dq-score__v b { color: var(--danger); }
.dq-score.warn .dq-score__v b { color: var(--warn); }
.dq-score.ok .dq-score__v b { color: var(--mint-ink); }
.dq-score__l { font-size: 11px; color: var(--text-soft); margin: 3px 0 9px; }
.dq-score__t { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; margin-top: 7px; }
.dq-score__t.down { color: var(--danger); } .dq-score__t.up { color: var(--ok); }

.dq-anoms { display: flex; flex-direction: column; gap: 9px; }
.dq-anom { display: grid; grid-template-columns: 36px 1fr; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 15px; box-shadow: var(--shadow-sm); animation: lab-up .4s cubic-bezier(.2,.7,.2,1) backwards; }
.dq-anom__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
.dq-anom__ic .mi { width: 17px; height: 17px; }
.dq-anom.crit .dq-anom__ic { background: var(--danger-soft); color: #b42318; }
.dq-anom.warn .dq-anom__ic { background: var(--warn-soft); color: #92590b; }
.dq-anom.ok .dq-anom__ic { background: var(--mint-tint); color: var(--mint-ink); }
.dq-anom__t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dq-anom__t b { font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.dq-anom__who { font-size: 12.5px; font-weight: 700; color: var(--mint-ink); background: var(--mint-tint); padding: 2px 9px; border-radius: 999px; }
.dq-anom__w { font-size: 13px; color: var(--text-2); line-height: 1.55; margin-top: 4px; }
.dq-anom__e { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); margin-top: 4px; }
.dq-anom__a { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; margin-top: 8px; padding: 9px 11px; background: var(--softer); border-radius: 9px; }
.dq-anom__a .mi { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--mint-700); }
.dq-anom__meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--text-soft); margin-top: 6px; }

.dq-gaps { display: flex; flex-direction: column; gap: 10px; }
.dq-gap { display: grid; grid-template-columns: 156px 1fr auto; gap: 13px; align-items: center; font-size: 13px; }
.dq-gap__k { font-weight: 600; }
.dq-gap__b { min-width: 0; }
.dq-gap__i { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; line-height: 1.4; }
.dq-gap__v { font-family: var(--font-mono); font-weight: 700; text-align: right; }
.dq-gap__v.crit { color: var(--danger); } .dq-gap__v.warn { color: var(--warn); } .dq-gap__v.ok { color: var(--mint-ink); }

.dq-people { overflow-x: auto; }
.dq-ptable { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
.dq-ptable thead th { text-align: left; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-soft); padding: 10px 13px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dq-ptable td { padding: 11px 13px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; color: var(--text-2); }
.dq-ptable tbody tr:last-child td { border-bottom: 0; }
.dq-ptable tbody tr:hover { background: var(--softer); }
.dq-ptable__who { font-weight: 700; color: var(--text-1); white-space: nowrap; }
.dq-axis { display: flex; align-items: center; gap: 8px; min-width: 108px; }
.dq-axis b { font-family: var(--font-mono); font-size: 12px; width: 26px; flex: none; }
.dq-axis .mg-meter { flex: 1; }
.dq-ptable__read { font-size: 12px; color: var(--text-dim); line-height: 1.45; max-width: 260px; }
.dq-ptable__move { font-size: 12px; color: var(--mint-ink); line-height: 1.45; max-width: 220px; }

/* ============================== REQ 5 · Performance intelligence ============================== */
.spi-funnel { display: flex; flex-direction: column; gap: 3px; }
.spi-step { display: grid; grid-template-columns: 132px 1fr; gap: 13px; align-items: center; }
.spi-step__k { font-size: 12.5px; font-weight: 600; text-align: right; color: var(--text-2); }
.spi-step__bar { position: relative; height: 34px; border-radius: 8px; background: var(--soft); overflow: hidden; }
.spi-step__fill { position: absolute; inset: 0 auto 0 0; border-radius: 8px; background: linear-gradient(90deg, var(--mint-600), var(--mint)); width: 0; transition: width 1s cubic-bezier(.2,.7,.2,1); }
.spi-step__fill.warn { background: linear-gradient(90deg, #e9b949, var(--warn)); }
.spi-step__fill.crit { background: linear-gradient(90deg, #ef6b5e, var(--danger)); }
.spi-step__n { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-weight: 800; font-size: 14px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.28); }
.spi-step__r { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11.5px; }
.spi-step__pc { font-weight: 700; color: var(--text-1); }
.spi-step__bm { color: var(--text-soft); }
.spi-step__gap { font-weight: 700; padding: 2px 7px; border-radius: 5px; }
.spi-step__gap.down { background: var(--danger-soft); color: #b42318; }
.spi-step__gap.up { background: var(--mint-tint); color: var(--mint-ink); }

.spi-leak { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; background: linear-gradient(135deg, #fff1f0, var(--surface)); border: 1px solid #f3c4bf; border-radius: var(--r-lg); padding: 16px 18px; }
.spi-leak__n { text-align: center; }
.spi-leak__n b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; color: #b42318; letter-spacing: -.02em; }
.spi-leak__n span { font-size: 10.5px; color: #b42318; text-transform: uppercase; letter-spacing: .05em; }
.spi-leak__b b { font-family: var(--font-display); font-weight: 800; font-size: 15px; display: block; }
.spi-leak__b p { font-size: 13px; color: var(--text-2); line-height: 1.55; margin-top: 4px; }
.spi-leak__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.spi-leak__meta span { font-family: var(--font-mono); font-size: 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }

.spi-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.spi-p { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.spi-p__h { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }
.spi-p__h b { font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.spi-p__u { font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.spi-p__u.down { color: var(--danger); } .spi-p__u.up { color: var(--ok); }
.spi-p__row { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.55; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.spi-p__row:first-of-type { border-top: 0; }
.spi-p__row .mi { width: 14px; height: 14px; flex: none; margin-top: 3px; }
.spi-p__row.good .mi { color: var(--mint-700); }
.spi-p__row.bad .mi { color: #b42318; }
.spi-p__row.coach .mi { color: var(--info); }
.spi-p__row b { color: var(--text-1); }
.spi-p__lift { margin-top: 9px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--mint-ink); background: var(--mint-tint); border-radius: 8px; padding: 6px 10px; display: inline-block; }

.spi-wins { display: flex; flex-direction: column; gap: 8px; }
.spi-win { display: flex; align-items: center; gap: 11px; padding: 11px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); font-size: 13px; }
.spi-win__ic { width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--mint-tint); display: grid; place-items: center; }
.spi-win__ic .mi { width: 14px; height: 14px; color: var(--mint-700); }
.spi-win__b { flex: 1; min-width: 0; }
.spi-win__m { font-size: 11.5px; color: var(--text-soft); }
.spi-win__w { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--mint-ink); flex: none; }

/* ============================== REQ 6 · Auto report ============================== */
.rp-cad { display: inline-flex; gap: 3px; padding: 3px; background: var(--soft); border-radius: 999px; }
.rp-cad button { font-size: 12px; font-weight: 700; color: var(--text-soft); padding: 7px 15px; border-radius: 999px; transition: all .15s; }
.rp-cad button.is-on { background: var(--surface); color: var(--text-1); box-shadow: var(--shadow-sm); }

.rp-doc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; animation: lab-up .5s cubic-bezier(.2,.7,.2,1) backwards; }
.rp-doc__top { display: flex; align-items: center; gap: 11px; padding: 15px 22px; background: radial-gradient(circle at 12% 20%, #12362a, #0a1712 76%); color: #fff; }
.rp-doc__top img { height: 20px; }
.rp-doc__meta { margin-left: auto; text-align: right; font-family: var(--font-mono); font-size: 10.5px; color: #9fb3aa; }
.rp-doc__cad { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8fe6c9; }
.rp-doc__body { padding: 22px 26px 26px; }
.rp-doc__hl { font-family: var(--font-display); font-weight: 800; font-size: clamp(19px, 1.1rem + .7vw, 26px); letter-spacing: -.02em; line-height: 1.25; }
.rp-tldr { margin: 14px 0 18px; display: flex; flex-direction: column; gap: 7px; }
.rp-tldr li { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.rp-tldr li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); flex: none; margin-top: 8px; }
.rp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line-soft); border-radius: var(--r-md); overflow: hidden; margin-bottom: 18px; }
.rp-kpi { background: var(--surface); padding: 13px 15px; }
.rp-kpi b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.1; letter-spacing: -.01em; }
.rp-kpi.crit b { color: var(--danger); } .rp-kpi.warn b { color: var(--warn); } .rp-kpi.ok b { color: var(--mint-ink); }
.rp-kpi__l { font-size: 11px; color: var(--text-soft); margin-top: 2px; }
.rp-kpi__vs { font-family: var(--font-mono); font-size: 11px; font-weight: 600; margin-top: 4px; }
.rp-kpi__n { font-size: 11.5px; color: var(--text-dim); margin-top: 5px; line-height: 1.4; }
.rp-movers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
@media (max-width: 720px) { .rp-movers { grid-template-columns: 1fr; } }
.rp-mv { border-radius: var(--r-md); padding: 13px 15px; }
.rp-mv.up { background: var(--mint-tint-2); border: 1px solid #cdeede; }
.rp-mv.down { background: #fff5f4; border: 1px solid #f3c4bf; }
.rp-mv__h { display: flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 800; font-size: 12.5px; margin-bottom: 8px; }
.rp-mv.up .rp-mv__h { color: var(--mint-ink); } .rp-mv.down .rp-mv__h { color: #b42318; }
.rp-mv__row { font-size: 12.5px; line-height: 1.55; padding: 5px 0; border-top: 1px solid rgba(0,0,0,.05); color: var(--text-2); }
.rp-mv__row:first-of-type { border-top: 0; }
.rp-mv__row b { color: var(--text-1); }
.rp-rows { display: flex; flex-direction: column; gap: 9px; }
.rp-row { display: grid; grid-template-columns: 26px 1fr; gap: 11px; padding: 12px 14px; background: var(--softer); border-radius: var(--r-md); border: 1px solid var(--line-soft); }
.rp-row__n { width: 24px; height: 24px; border-radius: 7px; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
.rp-row__t { font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.rp-row__d { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin-top: 3px; }
.rp-row__m { display: flex; gap: 11px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-soft); margin-top: 6px; }
.rp-health { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin-top: 20px; padding: 15px 17px; border-radius: var(--r-lg); background: var(--warn-soft); border: 1px solid #f0dca2; }
.rp-health__n b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; color: #92590b; }
.rp-health__n span { font-size: 9.5px; color: #92590b; text-transform: uppercase; letter-spacing: .05em; }
.rp-health__b b { font-family: var(--font-display); font-weight: 800; font-size: 13.5px; display: block; margin-bottom: 3px; }
.rp-health__b p { font-size: 12.5px; line-height: 1.6; color: var(--text-2); }
.rp-health__fix { font-size: 12.5px; color: var(--mint-ink); font-weight: 600; margin-top: 6px; }
.rp-doc__foot { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--text-soft); border-top: 1px solid var(--line-soft); margin-top: 20px; padding-top: 13px; }
.rp-doc__foot .mi { width: 15px; height: 15px; }

/* ============================== REQ 8 · Cross-functional ============================== */
.xf-split { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; align-items: start; }
@media (max-width: 1000px) { .xf-split { grid-template-columns: 1fr; } }
.xf-mis { display: flex; flex-direction: column; gap: 9px; }
.xf-row { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; box-shadow: var(--shadow-sm); }
.xf-row.over { border-left-color: var(--warn); }
.xf-row.short { border-left-color: var(--danger); }
.xf-row.good { border-left-color: var(--mint); }
.xf-row__t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.xf-row__t b { font-family: var(--font-display); font-weight: 800; font-size: 13.5px; }
.xf-swatch { width: 13px; height: 13px; border-radius: 4px; border: 1px solid rgba(0,0,0,.18); flex: none; }
.xf-row__c { font-size: 12px; color: var(--text-soft); }
.xf-row__nums { display: flex; gap: 12px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); margin-top: 6px; }
.xf-row__nums b { color: var(--text-1); }
.xf-row__nums .aged { color: #b42318; }
.xf-row__gap { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin-top: 6px; }
.xf-row__a { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; margin-top: 7px; padding: 8px 10px; background: var(--softer); border-radius: 8px; }
.xf-row__a .mi { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--mint-700); }
.xf-row__w { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--mint-ink); }

.xf-real { display: flex; flex-direction: column; gap: 10px; }
.xf-move { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 15px; box-shadow: var(--shadow-sm); }
.xf-move__fl { display: grid; grid-template-columns: 1fr auto 1fr; gap: 11px; align-items: center; }
.xf-move__side b { display: block; font-size: 13px; font-weight: 700; line-height: 1.35; }
.xf-move__side span { font-size: 11.5px; color: var(--text-soft); line-height: 1.4; display: block; margin-top: 3px; }
.xf-move__side--from b { color: #b42318; text-decoration: line-through; text-decoration-color: rgba(180,35,24,.4); }
.xf-move__side--to b { color: var(--mint-ink); }
.xf-move__ar { display: grid; place-items: center; color: var(--text-soft); }
.xf-move__ar .mi { width: 20px; height: 20px; }
.xf-move__foot { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: 11.5px; }
.xf-move__foot b { color: var(--mint-ink); }

.xf-joined { display: flex; flex-direction: column; gap: 10px; }
.xf-join { display: grid; grid-template-columns: 34px 1fr; gap: 12px; background: linear-gradient(135deg, var(--mint-tint-2), var(--surface)); border: 1px solid #cdeede; border-radius: var(--r-md); padding: 13px 15px; }
.xf-join__ic { width: 32px; height: 32px; border-radius: 9px; background: var(--mint); display: grid; place-items: center; }
.xf-join__ic .mi { width: 16px; height: 16px; color: #fff; }
.xf-join__t { font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.xf-join__e { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); margin-top: 5px; line-height: 1.5; }
.xf-join__d { font-size: 13px; color: var(--text-1); margin-top: 7px; line-height: 1.5; }
.xf-join__m { display: flex; gap: 11px; flex-wrap: wrap; font-size: 11px; color: var(--text-soft); margin-top: 6px; }

/* ============================== REQ 9 · 360 performance ============================== */
.tsp-quads { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 760px) { .tsp-quads { grid-template-columns: 1fr; } }
.tsp-q { border-radius: var(--r-lg); padding: 14px 16px; border: 1px solid var(--line); background: var(--surface); }
.tsp-q__h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tsp-q__h b { font-family: var(--font-display); font-weight: 800; font-size: 13.5px; }
.tsp-q__h span { font-size: 11px; color: var(--text-soft); }
.tsp-q__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tsp-q--star { background: linear-gradient(135deg, var(--mint-tint-2), var(--surface)); border-color: #cdeede; }
.tsp-q--star .tsp-q__dot { background: var(--mint); }
.tsp-q--trained { background: linear-gradient(135deg, #eff6ff, var(--surface)); border-color: #bfdbfe; }
.tsp-q--trained .tsp-q__dot { background: var(--info); }
.tsp-q--untrained { background: linear-gradient(135deg, #fffbeb, var(--surface)); border-color: #f0dca2; }
.tsp-q--untrained .tsp-q__dot { background: var(--warn); }
.tsp-q--support { background: linear-gradient(135deg, #fff5f4, var(--surface)); border-color: #f3c4bf; }
.tsp-q--support .tsp-q__dot { background: var(--danger); }
.tsp-per { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(0,0,0,.05); }
.tsp-per:first-of-type { border-top: 0; }
.tsp-per__n { font-size: 13px; font-weight: 700; flex: none; min-width: 92px; }
.tsp-per__bars { display: flex; gap: 4px; flex: none; }
.tsp-per__bar { width: 5px; height: 26px; border-radius: 3px; background: var(--soft); position: relative; overflow: hidden; }
.tsp-per__bar i { position: absolute; bottom: 0; left: 0; right: 0; background: var(--mint); }
.tsp-per__b { min-width: 0; }
.tsp-per__r { font-size: 12px; color: var(--text-2); line-height: 1.45; }
.tsp-per__x { font-size: 11.5px; color: var(--mint-ink); line-height: 1.45; margin-top: 2px; }

.tsp-links { display: flex; flex-direction: column; gap: 10px; }
.tsp-link { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 15px; box-shadow: var(--shadow-sm); }
.tsp-link__t { display: flex; align-items: flex-start; gap: 9px; }
.tsp-link__t b { font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.tsp-str { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; background: var(--info-soft); color: var(--info); flex: none; white-space: nowrap; }
.tsp-str.strong { background: var(--mint-tint); color: var(--mint-ink); }
.tsp-str.suggestive { background: var(--warn-soft); color: #92590b; }
.tsp-link__e { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); margin-top: 6px; line-height: 1.5; }
.tsp-link__n { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-soft); margin-top: 4px; }
.tsp-link__a { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; margin-top: 8px; padding: 8px 11px; background: var(--softer); border-radius: 8px; }
.tsp-link__a .mi { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--mint-700); }

.tsp-train { display: flex; flex-direction: column; gap: 9px; }
.tsp-tr { display: grid; grid-template-columns: 1fr auto; gap: 13px; align-items: center; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.tsp-tr b { font-size: 13.5px; font-weight: 700; }
.tsp-tr__blk { font-size: 12px; color: var(--text-2); line-height: 1.5; margin-top: 3px; }
.tsp-tr__plan { font-size: 12px; color: var(--mint-ink); margin-top: 4px; }
.tsp-tr__done { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--warn); white-space: nowrap; }

/* the honesty panel — this analysis touches people, so its limits are on screen */
.tsp-rigor { background: var(--surface); border: 1px solid #ddd6fe; border-left: 3px solid #7c3aed; border-radius: var(--r-md); padding: 14px 16px; margin-top: 14px; }
.tsp-rigor__h { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: 13px; color: #5b21b6; margin-bottom: 7px; }
.tsp-rigor__h .mi { width: 16px; height: 16px; }
.tsp-rigor p { font-size: 12.5px; line-height: 1.6; color: var(--text-2); }
.tsp-rigor p + p { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line-soft); }

/* ============================== responsive ============================== */
@media (max-width: 760px) {
  .mg { padding: 14px; }
  .mg__ctrls { width: 100%; }
  .cap-gate { grid-template-columns: 1fr; gap: 11px; }
  .cap-prop { grid-template-columns: 1fr; }
  .cap-prop__lists { grid-template-columns: 1fr; }
  .spi-step { grid-template-columns: 92px 1fr; }
  .dq-gap { grid-template-columns: 1fr; }
  .rp-doc__body { padding: 16px; }
}

/* ---- the save gate: held, overridden, or clean (REQ 1 × REQ 2) ---- */
.cap-save.is-blocked { background: linear-gradient(135deg, #7f1d1d, #4c1010); }
.cap-save.is-blocked .cap-save__m { color: #fca5a5; }
.cap-save__over { font-size: 12.5px; font-weight: 600; color: #fecaca; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 10px 16px; flex: none; transition: border-color .15s, color .15s; }
.cap-save__over:hover { border-color: #fff; color: #fff; }
.cap-save__saved.is-part { background: #fde68a; color: #7c2d12; }
.cap-ask.is-flash { animation: cap-flash .7s ease; }
@keyframes cap-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(4,190,140,0); }
  40% { box-shadow: 0 0 0 5px rgba(4,190,140,.35); }
}

/* ---- the data-quality lever is the point of the what-if studio, so it looks it ---- */
.sim-lever--hero { position: relative; padding: 9px 11px; margin: -9px -11px; border-radius: 12px; background: linear-gradient(135deg, var(--mint-tint-2), transparent); border: 1px dashed #a8ddc8; }
.sim-lever--hero .sim-lever__lab { color: var(--mint-ink); }
.sim-lever--hero .sim-lever__val { color: var(--mint-ink); }

/* "illustrative data" footnote — the demo says out loud which numbers are real */
.exec-illus { margin-top: 20px; padding-top: 13px; border-top: 1px solid var(--line-soft); font-size: 11.5px; line-height: 1.6; color: var(--text-soft); text-align: center; }

/* ---- ask-back + propensity layout fixes ---- */
.cap-ask__q, .cap-ask__why { display: block; }
.cap-prop .mc-donut { width: 104px; height: 104px; flex: none; }
.cap-prop .mc-donut__c b { font-size: 26px; letter-spacing: -.02em; }
.cap-prop .mc-donut__c span { font-size: 8px; letter-spacing: .05em; margin-top: 1px; }
.cap-prop__col ul { display: flex; flex-direction: column; gap: 3px; }

/* ---- topbar: 3 roles + up to 4 requirement tabs must not crush the controls ---- */
.pf-top .lang-pill,
.pf-top .mt-guide,
.pf-top .pf-theme,
.pf-top .pf-top__gear,
.pf-top .pf-top__avatar,
.pf-top .role-pill { flex: none; }
.pf-top .pf-demos { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pf-top .pf-demos::-webkit-scrollbar { display: none; }
@media (max-width: 1400px) {
  .pf-top { gap: 9px; padding: 0 14px; }
  .role-pill button { padding: 6px 10px; }
  .pf-demos button { padding: 6px 10px; }
  .mt-guide { padding: 8px 12px; }
}
@media (max-width: 1180px) { .pf-top__avatar { display: none; } }

/* ---- REQ 5: the blended closing ratio, un-blended ---- */
.spi-split { display: grid; grid-template-columns: auto auto 1fr; gap: 16px; align-items: center; }
.spi-split__b { text-align: center; padding: 10px 18px; border-radius: var(--r-md); background: var(--soft); }
.spi-split__b b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; color: var(--text-dim); }
.spi-split__b span { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); }
.spi-split__ar { color: var(--text-soft); display: grid; place-items: center; }
.spi-split__ar .mi { width: 20px; height: 20px; }
.spi-split__two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.spi-split__x { text-align: center; padding: 10px 14px; border-radius: var(--r-md); }
.spi-split__x b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; }
.spi-split__x span { font-size: 10.5px; }
.spi-split__x.ok { background: var(--mint-tint); } .spi-split__x.ok b, .spi-split__x.ok span { color: var(--mint-ink); }
.spi-split__x.crit { background: var(--danger-soft); } .spi-split__x.crit b, .spi-split__x.crit span { color: #b42318; }
@media (max-width: 760px) { .spi-split { grid-template-columns: 1fr; } .spi-split__ar { transform: rotate(90deg); } }

/* the funnel's per-stage stats live outside the bar, so a 92% bar stays readable */
.spi-step { grid-template-columns: 132px 1fr auto; }
.spi-step__r { position: static; transform: none; display: flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11.5px; min-width: 178px; justify-content: flex-end; }

/* ============================================================================
   Dark mode. kit.css tokens re-map themselves in theme-dark.css, so almost
   everything above flips for free — this block only re-states the handful of
   places where a literal hex was needed for a specific semantic (quadrant
   tints, the LINE message bubble, the held-save bar, the PDPA panel).
   ========================================================================== */
[data-theme="dark"] .mg-kind.discipline { background: #241a3d; color: #c4b5fd; }
[data-theme="dark"] .mg-kind.performance { background: #3a1029; color: #f9a8d4; }
[data-theme="dark"] .cap-field.conflict { background: #3d1620; }
[data-theme="dark"] .cap-st.conflict { background: #3d1620; color: #fda4af; }
[data-theme="dark"] .co-msg__draft { background: #14392a; color: var(--text-1); }
[data-theme="dark"] .co-msg__chan { background: #14392a; color: #6fe0b6; }
[data-theme="dark"] .cap-save.is-blocked { background: linear-gradient(135deg, #3f1414, #240a0a); }
[data-theme="dark"] .cap-save__saved.is-part { background: #8a6a12; color: #fff4d6; }
[data-theme="dark"] .enr-block { border-color: #4a2020; }
[data-theme="dark"] .enr-afford { background: linear-gradient(135deg, #1c1733, var(--surface)); border-color: #322a5c; }
[data-theme="dark"] .enr-afford__band { color: #c4b5fd; }
[data-theme="dark"] .spi-leak { background: linear-gradient(135deg, #2d1414, var(--surface)); border-color: #4a2020; }
[data-theme="dark"] .spi-leak__n b, [data-theme="dark"] .spi-leak__n span { color: #ff9b8c; }
[data-theme="dark"] .rp-mv.down { background: #2a1212; border-color: #4a2020; }
[data-theme="dark"] .rp-mv.down .rp-mv__h { color: #ff9b8c; }
[data-theme="dark"] .rp-health { background: #2e2410; border-color: #56431a; }
[data-theme="dark"] .rp-health__n b, [data-theme="dark"] .rp-health__n span { color: #f6c86a; }
[data-theme="dark"] .tsp-q--star { background: linear-gradient(135deg, #10241d, var(--surface)); border-color: #1d4a3a; }
[data-theme="dark"] .tsp-q--trained { background: linear-gradient(135deg, #101d2e, var(--surface)); border-color: #1e3557; }
[data-theme="dark"] .tsp-q--untrained { background: linear-gradient(135deg, #2a2210, var(--surface)); border-color: #4d3f19; }
[data-theme="dark"] .tsp-q--support { background: linear-gradient(135deg, #2a1414, var(--surface)); border-color: #4a2020; }
[data-theme="dark"] .tsp-rigor { border-color: #322a5c; border-left-color: #8b5cf6; }
[data-theme="dark"] .tsp-rigor__h { color: #c4b5fd; }
[data-theme="dark"] .xf-join { background: linear-gradient(135deg, #10241d, var(--surface)); border-color: #1d4a3a; }
[data-theme="dark"] .spi-split__x.crit { background: #2d1414; }
[data-theme="dark"] .cap-ask { background: linear-gradient(135deg, #10241d, var(--surface)); border-color: #1d4a3a; }
[data-theme="dark"] .mg-src { background: #12263a; color: #7fc2f0; }
[data-theme="dark"] .prep-table tbody tr.is-risk,
[data-theme="dark"] .cap-field.missing { background: #2d1414; }
[data-theme="dark"] .cap-gate__block { background: #2d1414; }
[data-theme="dark"] .cap-gate__block.is-clear { background: #102a22; }

/* the Amity wordmark is dark-on-transparent, so it needs lifting on a dark topbar */
[data-theme="dark"] .pf-top__brand img { filter: brightness(0) invert(1) opacity(.92); }

/* ============================================================================
   Cards dropped into the chat (cards.js). The Sales Consultant works in one
   conversation, so what used to be a page is a card in the thread.
   ========================================================================== */
.mity-crm-card, .mity-enrich-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 15px 16px; box-shadow: var(--shadow-sm); margin-top: 10px; max-width: 760px;
  animation: lab-up .45s cubic-bezier(.2,.7,.2,1) backwards;
}
.mity-crm-card .mg-sec:first-child, .mity-enrich-card .mg-sec:first-child { margin-top: 4px; }
.mity-crm-card .cap-heard { margin-bottom: 12px; }
.mity-crm-card .cap-save { margin-top: 14px; }

/* income band for the occupation */
.enr-income { background: linear-gradient(135deg, #fffbeb, var(--surface)); border: 1px solid #f0dca2; border-radius: var(--r-lg); padding: 14px 16px; }
.enr-income__band { font-family: var(--font-display); font-weight: 800; font-size: 23px; letter-spacing: -.01em; color: #92590b; }
.enr-income__role { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); margin-top: 6px; }
.enr-income__role .mi { width: 14px; height: 14px; }
.enr-income__note { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin: 7px 0; }

/* the affordability arithmetic, step by step */
.enr-afford2 { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 15px 16px; box-shadow: var(--shadow-sm); }
.enr-afford2__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.enr-afford2__step { text-align: center; min-width: 96px; flex: 1; padding: 10px 12px; border-radius: var(--r-md); background: var(--softer); border: 1px solid var(--line-soft); }
.enr-afford2__step b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1.15; letter-spacing: -.01em; }
.enr-afford2__step span { font-size: 10.5px; color: var(--text-soft); line-height: 1.3; display: block; margin-top: 3px; }
.enr-afford2__step:last-of-type { background: var(--mint-tint); border-color: #cdeede; }
.enr-afford2__step:last-of-type b { color: var(--mint-ink); }
.enr-afford2__ar { color: var(--text-soft); flex: none; display: grid; place-items: center; }
.enr-afford2__ar .mi { width: 17px; height: 17px; }
.enr-afford2__ass { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--line-soft); display: flex; gap: 7px; align-items: flex-start; }
.enr-afford2__ass .mi { width: 14px; height: 14px; flex: none; margin-top: 2px; }

.enr-fit__price { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text-1); flex: none; }
.enr-verdict__lab { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mint-ink); background: var(--mint-tint); padding: 3px 8px; border-radius: 5px; flex: none; margin-right: 4px; }
.enr-disc { display: flex; gap: 7px; align-items: flex-start; font-size: 11.5px; line-height: 1.55; color: var(--text-dim); font-style: italic; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.enr-disc .mi { width: 14px; height: 14px; flex: none; margin-top: 2px; }

[data-theme="dark"] .enr-income { background: linear-gradient(135deg, #2e2410, var(--surface)); border-color: #56431a; }
[data-theme="dark"] .enr-income__band { color: #f6c86a; }
@media (max-width: 680px) { .enr-afford2__ar { display: none; } .enr-afford2__step { min-width: 0; } }

/* ---- how current is this? -----------------------------------------------------
   Sits above the summary because a stale dossier is worse than no dossier: the
   date of the evidence has to be read before the claims made from it. Colour is
   load-bearing — green only when something inside 18 months confirms the role. */
.enr-fresh { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.enr-fresh.ok { border-color: #cdeede; background: linear-gradient(135deg, var(--mint-tint-2), var(--surface)); }
.enr-fresh.warn { border-color: #f0d089; background: var(--warn-soft); }
.enr-fresh.crit { border-color: #f3b1ab; background: var(--danger-soft); }
.enr-fresh__top { display: flex; align-items: center; gap: 8px; }
.enr-fresh__ic { display: inline-flex; }
.enr-fresh__ic .mi { width: 16px; height: 16px; color: var(--text-soft); }
.enr-fresh.ok .enr-fresh__ic .mi { color: var(--mint-700); }
.enr-fresh__h { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-soft); margin-right: auto; }
.enr-fresh.ok .enr-fresh__h { color: var(--mint-ink); }

/* the dates themselves — value first, label under it, so the eye lands on "2023".
   The label is a bare text node so it inherits the uppercase; `b` opts back out. */
.enr-fresh__meta { display: flex; flex-wrap: wrap; gap: 7px; }
.enr-fresh__meta > span { display: flex; flex-direction: column; gap: 1px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.enr-fresh__meta b { font-size: 12px; font-weight: 700; color: var(--text-1); text-transform: none; letter-spacing: 0; }
/* the anchor is a phrase, not a date — let it wrap rather than stretch the row */
.enr-fresh__anchor { max-width: 320px; }
.enr-fresh__anchor b { white-space: normal; line-height: 1.35; }
.enr-fresh__ln.ok b { color: var(--mint-ink); }
.enr-fresh__ln.warn b { color: #92590b; }
.enr-fresh__ln.crit b { color: var(--danger); }
.enr-fresh__ln.na b { color: var(--text-dim); }   /* no name to search — neutral, not a miss */
.enr-fresh__why { font-size: 12.5px; line-height: 1.5; color: var(--text-2); }

.enr-fresh__risks { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.enr-fresh__rh { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim); }
.enr-fresh__risk { display: flex; gap: 8px; align-items: flex-start; }
.enr-fresh__risk .mi { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--warn); }
.enr-fresh__risk b { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-1); line-height: 1.45; }
.enr-fresh__risk span { display: block; font-size: 11.5px; color: var(--text-dim); line-height: 1.45; margin-top: 2px; }
.enr-fresh__ran { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.enr-fresh__ran > span { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-dim); }
.enr-fresh__ran code { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-2);
  background: var(--soft); border-radius: 5px; padding: 2px 7px; overflow-wrap: anywhere; }

/* per-field date stamp, sitting with confidence and source in the field footer */
.enr-asof { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 9px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px;
  background: var(--mint-tint); color: var(--mint-ink); }
.enr-asof .mi { width: 10px; height: 10px; }
.enr-asof.is-undated { background: var(--warn-soft); color: #92590b; }
.enr-foot__when { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--text-dim);
  background: var(--soft); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }

/* ---- the dossier: what a consultant reads before walking back over ---- */
.enr-summary { display: flex; gap: 11px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--mint-tint-2), var(--surface)); border: 1px solid #cdeede; margin-bottom: 4px; }
.enr-summary .mi { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--mint-700); }
.enr-summary b { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mint-ink); display: block; margin-bottom: 5px; }
.enr-summary p { font-size: 14px; line-height: 1.65; color: var(--text-1); }

.enr-foot { display: flex; flex-direction: column; gap: 8px; }
.enr-foot__row { display: grid; grid-template-columns: 116px 1fr auto; gap: 11px; align-items: start;
  padding: 11px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.enr-foot__kind { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-dim); background: var(--soft); padding: 4px 8px; border-radius: 5px; text-align: center; }
.enr-foot__what { font-size: 13.5px; line-height: 1.5; color: var(--text-1); }
.enr-foot__so { font-size: 12px; line-height: 1.45; color: var(--mint-ink); margin-top: 4px; display: flex; gap: 6px; align-items: flex-start; }
.enr-foot__so .mi { width: 13px; height: 13px; flex: none; margin-top: 2px; }

.enr-talk { display: flex; flex-direction: column; gap: 8px; }
.enr-talk__row { display: flex; gap: 9px; align-items: flex-start; padding: 11px 13px; background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--mint); border-radius: var(--r-md); }
.enr-talk__row .mi { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--mint-700); }
.enr-talk__row b { font-size: 13.5px; line-height: 1.5; display: block; }
.enr-talk__row span { font-size: 12px; color: var(--text-dim); line-height: 1.45; display: block; margin-top: 3px; }
.enr-talk__avoid { display: flex; gap: 9px; align-items: flex-start; padding: 10px 13px; border-radius: var(--r-md);
  background: var(--danger-soft); font-size: 12.5px; line-height: 1.5; }
.enr-talk__avoid .mi { width: 15px; height: 15px; flex: none; margin-top: 2px; color: #b42318; }
.enr-talk__avoid b { color: #b42318; }

/* ---- board rows now carry two actions ---- */
.nba-card__acts { display: flex; flex-direction: column; gap: 6px; flex: none; align-self: center; }
.nba-card__go, .nba-card__dig { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px; transition: background .15s, color .15s, transform .12s; }
.nba-card__go { background: var(--mint); color: #04150f; }
.nba-card__go:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(4,190,140,.3); }
.nba-card__dig { background: var(--surface); border: 1px solid var(--line); color: var(--text-dim); }
.nba-card__dig:hover { border-color: var(--mint); color: var(--mint-ink); transform: translateY(-1px); }
.nba-card__go .mi, .nba-card__dig .mi { width: 13px; height: 13px; }

[data-theme="dark"] .enr-summary { background: linear-gradient(135deg, #10241d, var(--surface)); border-color: #1d4a3a; }
/* the freshness banner's three states carry literal borders, so they need flipping */
[data-theme="dark"] .enr-fresh.ok { background: linear-gradient(135deg, #10241d, var(--surface)); border-color: #1d4a3a; }
[data-theme="dark"] .enr-fresh.warn { border-color: #56431a; }
[data-theme="dark"] .enr-fresh.crit { border-color: #4a2020; }
[data-theme="dark"] .enr-fresh__risk span, [data-theme="dark"] .enr-fresh__ran code { color: var(--text-soft); }
[data-theme="dark"] .enr-talk__avoid { background: #2d1414; }
@media (max-width: 760px) {
  .enr-foot__row { grid-template-columns: 1fr; }
  .nba-card__acts { flex-direction: row; flex-wrap: wrap; }
}

/* ============================================================================
   Board rows, rebuilt. The row used to be one big <button>; it now carries two
   real actions, so the inherited single-action styling has to be undone:
   scene-nba.css dims .nba-card__go to opacity .6 and lifts it on row hover,
   which left the new buttons looking disabled on every row but the hovered one.
   ========================================================================== */
.nba-board { max-width: 860px; }
.nba-card {
  cursor: default;                      /* only the buttons are clickable now */
  align-items: center;
  gap: 14px;
  padding: 13px 15px 13px 17px;
}
.nba-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line); }
.nba-card:active { transform: none; }
.nba-card__rank { align-self: flex-start; margin-top: 1px; }
.nba-card__b { flex: 1 1 auto; }

.nba-card__acts { display: flex; flex-direction: column; align-items: stretch; gap: 6px; flex: none; align-self: center; }
.nba-card__go, .nba-card__dig {
  opacity: 1;                            /* undo the dimming above */
  justify-content: center;
  cursor: pointer;
}
.nba-card:hover .nba-card__go { opacity: 1; }
.nba-card:hover .nba-card__go .mi:last-child { transform: none; }
.nba-card__go:hover { background: var(--mint-hover); }

/* tighter type so four rows read as a worklist, not four posters */
.nba-card__title { font-size: 14px; }
.nba-card__why { font-size: 12px; margin-top: 4px; }
.nba-card__steps { gap: 5px 10px; margin-top: 7px; }
.nba-card__step { font-size: 11px; }

@media (max-width: 900px) {
  .nba-card { flex-wrap: wrap; }
  .nba-card__acts { flex-direction: row; width: 100%; margin-left: 38px; }
  .nba-card__go, .nba-card__dig { flex: 1; }
}

/* ---- the search log: what was actually tried, and what each attempt returned ---- */
.enr-log { display: flex; flex-direction: column; gap: 1px; background: var(--line-soft); border-radius: var(--r-md); overflow: hidden; }
.enr-log__row { display: grid; grid-template-columns: minmax(180px, 40%) 1fr; gap: 12px; align-items: baseline; background: var(--surface); padding: 8px 12px; font-size: 12px; }
.enr-log__row code { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); overflow-wrap: anywhere; }
.enr-log__row span { color: var(--text-dim); line-height: 1.45; }
.enr-log__row::before { content: ''; }
.enr-log__row.hit code { color: var(--mint-ink); }
.enr-log__row.empty { background: var(--softer); }
.enr-log__row.blocked { background: var(--warn-soft); }
.enr-log__row.blocked span { color: #92590b; }
@media (max-width: 680px) { .enr-log__row { grid-template-columns: 1fr; gap: 3px; } }

/* ============================================================================
   Progressive layout for the consultant's chat.

   The greeting state inherited `justify-content: center` with no overflow, which
   was fine when the greeting was a mascot and four chips. This copilot adds a
   four-row worklist and five starter chips, so on a short viewport the content is
   taller than the pane — and `justify-content: center` distributes NEGATIVE free
   space, pushing the top of the content up over the chat header where it can
   never be scrolled back into view.

   Auto margins centre the same way but resolve to 0 when free space is negative,
   so the pane simply scrolls instead. Everything below is about giving that
   content less to fight over as the viewport shrinks.
   ========================================================================== */
.pf-chat .copilot:not(.is-chat) { justify-content: flex-start; overflow-y: auto; }
.pf-chat .copilot:not(.is-chat) .copilot__inner { margin-top: auto; margin-bottom: auto; }
.pf-chat .copilot.is-chat { overflow: hidden; }          /* the message list owns scrolling here */

/* The chassis gives the pane `min-height: 60vh` below 940px so the empty state
   isn't squashed on a tablet. On a *short* phone that floor is taller than the
   space the flex row can hand out, so the pane grows past its parent and takes
   the composer off-screen with it. Keep the floor only where it earns its keep. */
.pf-chat .copilot { min-height: 0; }
@media (max-width: 940px) and (min-height: 700px) {
  .pf-chat .copilot { min-height: 55vh; }
}

/* --- short viewports: spend the vertical budget on the worklist, not the mascot --- */
@media (max-height: 820px) {
  .pf-chat .copilot:not(.is-chat) { padding-top: 24px; }
  .copilot__inner { gap: 15px; }
  .pf-chat .copilot__mascot { width: 76px; height: 76px; }
  .pf-chat .copilot__title { font-size: 25px; }
  .nba-card { padding: 11px 13px 11px 15px; }
  .nba-card__steps { margin-top: 5px; }
}
@media (max-height: 700px) {
  .pf-chat .copilot:not(.is-chat) { padding-top: 16px; }
  .copilot__inner { gap: 11px; }
  .pf-chat .copilot__mascot { display: none; }           /* charm loses to usable space */
  .pf-chat .copilot__title { font-size: 21px; }
  .pf-chat .copilot__sub { font-size: 13px; }
  .nba-board__h span { display: none; }
  .nba-card__steps { display: none; }           /* the plan button carries the detail */
}
@media (max-height: 560px) {
  .copilot__sub, .nba-card__why { display: none; }
  .nba-card { padding: 9px 12px 9px 14px; }
}

/* --- the suggestion chips, where a board is also present -----------------------
   Five long prompts wrap to three rows (~177px). On the consultant screen the
   ranked board is the hero and the chips are the escape hatch, so together they
   overran the pane and the sticky composer floated over the chips' tail. One
   scrollable row at each chip's natural width, with a fade on the trailing edge
   so it reads as "more this way" rather than as a cut-off. The Ask-data screen
   has no board — there the chips *are* the content, so they keep wrapping. */
.copilot__inner:has(.nba-board) .nlq-chips {
  flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
}
.copilot__inner:has(.nba-board) .nlq-chips::-webkit-scrollbar { display: none; }
.copilot__inner:has(.nba-board) .nlq-chip { flex: none; white-space: nowrap; }

/* --- narrow viewports: the board becomes a stack, the panel steps aside --- */
@media (max-width: 1080px) {
  .nba-board { max-width: none; }
}
@media (max-width: 620px) {
  .pf-chat .copilot:not(.is-chat) { padding-left: 14px; padding-right: 14px; }
  .pf-chat .copilot__greeting { flex-direction: column; align-items: flex-start; gap: 12px; }
  .copilot__text { min-width: 0; }
  .nba-card { align-items: flex-start; }
  .nba-card__acts { margin-left: 0; }
  .nlq-chip { font-size: 12px; }
  .mity-crm-card, .mity-enrich-card { padding: 13px; }
  .cap-gate__to { font-size: 30px; }
  .enr-afford2__step { min-width: 0; }
}

/* The composer must never be the thing you have to scroll to find. Now that the greeting
   pane scrolls, pin it to the bottom of that pane; the box-shadow spread paints a halo of
   page background so content sliding underneath doesn't peek around the pill's corners.
   On a tall desktop the content is centred and doesn't scroll, so this is a no-op there. */
.pf-chat .copilot:not(.is-chat) .copilot__input {
  position: sticky;
  bottom: 0;
  z-index: 2;
  box-shadow: var(--shadow-sm), 0 0 0 12px var(--softer);
}
.pf-chat .copilot:not(.is-chat) .copilot__input:focus-within {
  box-shadow: 0 0 0 3px rgba(4,190,140,.13), var(--shadow-sm), 0 0 0 12px var(--softer);
}

/* ============================================================================
   Narrow viewports: the shell itself has to give way.
   ========================================================================== */

/* Mobile browsers "font boost" text in a narrow viewport — a 30px heading was being
   rendered at 34px, which is why the greeting swallowed the screen. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* The topbar was a single non-wrapping row, so below ~900px the language switch, the
   theme toggle and Guided demo scrolled off the right edge with no way to reach them.
   Let it become two rows instead: identity + roles, then requirements + controls. */
@media (max-width: 900px) {
  .pf-top {
    height: auto;
    min-height: var(--top-h);
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 9px 12px;
  }
  .pf-top__spacer { display: none; }
  .pf-top .role-pill { order: 1; }
  .pf-top .pf-demos { order: 3; flex: 1 1 100%; }
  .pf-top .lang-pill, .pf-top .pf-theme, .pf-top .mt-guide, .pf-top .pf-top__gear { order: 2; }
  .pf-top .mt-guide { margin-left: auto; }
  .mt-skel { inset: 0; }                 /* the skeleton cover keyed off a fixed top height */
}

/* Below tablet the product rail is pure chrome — 60px of a 375px screen for a nav the
   demo never uses. Give the space to the work. */
@media (max-width: 760px) {
  .pf { grid-template-columns: 1fr; }
  .pf-rail { display: none; }
}

/* the head block wraps on a phone, so it can't be a fixed 60px either */
@media (max-width: 620px) {
  .pf-chat__head { height: auto; min-height: 56px; padding: 9px 14px; }
  .pf-chat .copilot__title { font-size: 22px; }
  .nba-card__title { font-size: 13.5px; }
  .nba-card__go span, .nba-card__dig span { font-size: 9.5px; }
}

/* scene-nba.css hides the action label below 640px — sensible when the label was a faint
   "get the full plan →" hint on a fully-clickable row, wrong now that it is one of two
   real buttons: an unlabelled green pill next to a labelled outline one is unreadable. */
@media (max-width: 640px) {
  .nba-card .nba-card__go span, .nba-card .nba-card__dig span { display: inline; }
}

/* --- label/value rows: drop the fixed label column on a phone -----------------
   Four card rows share a `<fixed label> <flexible body> <auto status>` grid. The
   fixed column plus gaps plus the status chips need ~270px, so inside a ~250px
   chat pane the body column is squeezed to zero and the row overflows its own
   clipped parent — the value simply disappears. Below 700px the label moves to
   its own line and the body gets the full width. */
@media (max-width: 700px) {
  .cap-field { grid-template-columns: 1fr auto; gap: 4px 9px; padding: 9px 11px; }
  .cap-field__k { grid-column: 1 / -1; }
  .cap-field__v { grid-column: 1; }
  .cap-field__r { grid-column: 2; justify-self: end; }
  .cap-field__why { grid-column: 1 / -1; margin-top: 1px; }

  .dq-gap { grid-template-columns: 1fr auto; gap: 3px 10px; }
  .dq-gap__k { grid-column: 1 / -1; }
  .dq-gap__b { grid-column: 1; }
  .dq-gap__v { grid-column: 2; justify-self: end; }

  /* the funnel's stats strip claims a 178px minimum, which would leave the bar
     a stub — give each of the three parts its own row instead */
  .spi-step { grid-template-columns: 1fr; gap: 3px; }
  .spi-step__k { text-align: left; }
  .spi-step__r { min-width: 0; justify-content: flex-start; }

  .enr-foot__row { grid-template-columns: 1fr; gap: 6px; }
  .enr-foot__kind { justify-self: start; }

  /* section headers are a no-wrap flex row: icon + title + hint */
  .mg-sec { flex-wrap: wrap; gap: 6px 9px; margin: 16px 0 9px; }
  .mg-sec span { flex-basis: 100%; }
}

/* The composer is a fixed-height pill, so a wrapping placeholder gets clipped mid-word.
   Keep the field on one line and let the long controls step aside on a phone. */
.copilot__field { white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; }
@media (max-width: 620px) {
  .copilot__input .copilot__attach { display: none; }
  .copilot__input .mity-model__tier { display: none; }
  .copilot__input { padding-left: 12px; }
}

/* ============================================================================
   Management's Morning Brief — a briefing, not a dashboard.

   The reference this is built against is a retail store brief: three columns of
   panels, each one a short intro then a numbered list where every item is a bold
   claim carrying its number, the read underneath, and the action that follows.
   The design job here is restraint — this is read at 8:55am with a coffee, so
   nothing animates, nothing competes, and the eye goes left-to-right in the order
   an executive actually needs it: what broke → what the numbers did → what to do.
   ========================================================================== */
.mb { display: flex; flex-direction: column; gap: 18px; }

.mb__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.mb__who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mb__avatar { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  flex: none; border-radius: 50%; background: var(--mint-tint); }
.mb__avatar .mi { width: 22px; height: 22px; color: var(--mint-700); }
.mb__who h2 { font-family: var(--font-display); font-size: clamp(21px, 1.4vw + 15px, 27px); font-weight: 800;
  letter-spacing: -.015em; line-height: 1.15; }
.mb__who p { font-size: 13.5px; color: var(--text-soft); margin-top: 3px; }
.mb__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mb__asof { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .03em; text-transform: uppercase;
  color: var(--text-dim); }

/* Three columns on a wide screen, and they carry different weights of content —
   anomalies and summary stack on the left, the numbers sit in the middle where the
   eye lands, recommendations get their own column because they are the longest. */
.mb__grid { display: grid; grid-template-columns: 1.05fr .8fr 1.05fr; gap: 14px; align-items: start; }
.mb-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.mb-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mb-card--alert { border-color: #f0d089; }
.mb-card--reco { border-color: #cdeede; }
.mb-card__h { display: flex; align-items: center; gap: 9px; }
.mb-card__h .mi { width: 17px; height: 17px; flex: none; color: var(--mint-700); }
.mb-card--alert .mb-card__h .mi { color: var(--warn); }
.mb-card__h b { font-family: var(--font-display); font-size: 15px; font-weight: 800; margin-right: auto; }
.mb-card__say, .mb-card__more { flex: none; border-radius: var(--r-pill); transition: color .15s, background .15s, border-color .15s; }
.mb-card__say { display: inline-flex; padding: 5px; color: var(--text-dim); }
.mb-card__say .mi { width: 15px; height: 15px; color: inherit; }
.mb-card__say:hover { background: var(--soft); color: var(--mint-700); }
.mb-card__more { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-soft); padding: 4px 10px; border: 1px solid var(--line); }
.mb-card__more:hover { color: var(--mint-ink); border-color: var(--mint); background: var(--mint-tint); }
.mb-card__intro { font-size: 12.5px; line-height: 1.55; color: var(--text-soft); }
.mb-card__foot { font-size: 12px; line-height: 1.5; color: var(--text-dim); padding-top: 9px; border-top: 1px solid var(--line-soft); }

/* numbered items — the bold line is the claim, everything under it is evidence */
.mb-list { display: flex; flex-direction: column; gap: 11px; }
.mb-item { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.mb-item__n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--soft); color: var(--text-soft);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; }
.mb-item.crit .mb-item__n { background: var(--danger-soft); color: #b42318; }
.mb-item.warn .mb-item__n { background: var(--warn-soft); color: #92590b; }
.mb-item.ok .mb-item__n { background: var(--mint-tint); color: var(--mint-ink); }
.mb-item__b { min-width: 0; }
.mb-item__b b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.45; color: var(--text-1); }
.mb-item__b p { font-size: 12.5px; line-height: 1.55; color: var(--text-2); margin-top: 4px; }
.mb-item__do { display: flex; gap: 6px; align-items: flex-start; color: var(--mint-ink) !important; }
.mb-item__do .mi { width: 13px; height: 13px; flex: none; margin-top: 3px; }
.mb-item__meta { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 6px !important; }
.mb-item__meta span { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700; color: var(--text-dim); }
.mb-item__meta .mi { width: 12px; height: 12px; }
.mb-item__val { color: var(--mint-ink) !important; }

/* the number panel — one ring, three figures, nothing else */
.mb-perf { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mb-ring { position: relative; width: 128px; height: 128px; flex: none; }
.mb-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mb-ring circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.mb-ring__bg { stroke: var(--soft); }
.mb-ring__fg { stroke: var(--mint); transition: stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1); }
.mb-ring__fg.warn { stroke: var(--warn); }
.mb-ring__c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.mb-ring__c span, .mb-ring__c i { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); font-style: normal; }
.mb-ring__c b { font-family: var(--font-display); font-size: 27px; font-weight: 800; line-height: 1; color: var(--text-1); }
.mb-perf__nums { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.mb-perf__nums > div { display: flex; flex-direction: column; gap: 1px; }
.mb-perf__nums b { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display);
  font-size: 19px; font-weight: 800; line-height: 1.1; }
.mb-perf__nums .mi { width: 15px; height: 15px; }
.mb-perf__nums span { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim); }
.mb-perf__nums .up b { color: var(--mint-ink); }
.mb-perf__nums .down b { color: var(--danger); }

/* the to-do list — tickable, because a brief you can act on beats one you read */
.mb-todo__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-dim); }
.mb-todo__bar { height: 5px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.mb-todo__bar i { display: block; height: 100%; border-radius: 999px; background: var(--mint);
  transition: width .35s cubic-bezier(.2,.7,.2,1); }
.mb-todos { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.mb-todo { display: flex; gap: 10px; align-items: flex-start; padding: 7px 8px; border-radius: var(--r-sm);
  cursor: pointer; transition: background .15s; }
.mb-todo:hover { background: var(--softer); }
.mb-todo__box { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
  flex: none; margin-top: 1px; border: 1.5px solid var(--line); border-radius: 5px; background: var(--surface);
  transition: background .15s, border-color .15s; }
.mb-todo__box .mi { width: 11px; height: 11px; color: transparent; }
.mb-todo.is-done .mb-todo__box { background: var(--mint); border-color: var(--mint); }
.mb-todo.is-done .mb-todo__box .mi { color: #fff; }
.mb-todo__t { font-size: 13px; line-height: 1.5; color: var(--text-1); }
.mb-todo__t i { font-style: normal; color: var(--text-dim); }
.mb-todo.is-done .mb-todo__t { color: var(--text-dim); text-decoration: line-through; }

.mb-datanote { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; padding: 12px 15px;
  border-radius: var(--r-md); background: var(--warn-soft); border: 1px solid #f0d089; }
.mb-datanote .mi { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--warn); }
.mb-datanote span { font-size: 12.5px; line-height: 1.55; color: var(--text-1); }

[data-theme="dark"] .mb-card--alert { border-color: #56431a; }
[data-theme="dark"] .mb-card--reco { border-color: #1d4a3a; }
[data-theme="dark"] .mb-datanote { border-color: #56431a; }
[data-theme="dark"] .mb-todo__box { background: var(--soft); }

/* Two columns, then one. The middle column carries the numbers, so it goes first
   when the grid collapses — an executive skimming on a phone wants the figure. */
@media (max-width: 1200px) {
  .mb__grid { grid-template-columns: 1fr 1fr; }
  .mb-col:nth-child(2) { order: -1; }
}
@media (max-width: 800px) {
  .mb__grid { grid-template-columns: 1fr; }
  .mb-perf { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .mb-ring { width: 104px; height: 104px; }
  .mb-ring__c b { font-size: 22px; }
  .mb-card__more span { display: none; }
}

/* Every funnel stage against its benchmark, inside the manager's chat card. The
   benchmark is a tick on the bar rather than a second bar: the question is never
   "what are the two numbers", it is "which side of the line are we on". */
.spi-bench { display: flex; flex-direction: column; gap: 7px; }
.spi-bench__row { display: grid; grid-template-columns: minmax(120px, 30%) 1fr auto; gap: 12px; align-items: center; }
.spi-bench__k { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.spi-bench__bar { position: relative; height: 18px; border-radius: 6px; background: var(--soft); overflow: hidden; }
.spi-bench__bar i { display: block; height: 100%; border-radius: 6px; background: var(--mint);
  transition: width .8s cubic-bezier(.2,.7,.2,1); }
.spi-bench__bar u { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text-1);
  opacity: .55; transform: translateX(-1px); }
.spi-bench__row.warn .spi-bench__bar i { background: var(--warn); }
.spi-bench__row.crit .spi-bench__bar i { background: var(--danger); }
.spi-bench__v { font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-align: right; white-space: nowrap; }
.spi-bench__v span { display: block; font-size: 9.5px; font-weight: 600; color: var(--text-dim); }
.spi-bench__row.warn .spi-bench__v { color: var(--warn); }
.spi-bench__row.crit .spi-bench__v { color: var(--danger); }
.spi-bench__row.ok .spi-bench__v { color: var(--mint-ink); }
@media (max-width: 700px) {
  .spi-bench__row { grid-template-columns: 1fr auto; gap: 3px 10px; }
  .spi-bench__k { grid-column: 1 / -1; }
  .spi-bench__bar { grid-column: 1; }
}

/* The morning brief's loading state. It writes for the better part of a minute, and the
   first thing anyone asked looking at a blank page was "where is it?" — so the five panels
   go up straight away in their real positions and fill in. Shimmer, not a spinner: a
   spinner says "wait", a shimmering layout says "this is the page you are getting". */
.mb-card--sk { pointer-events: none; }
.mb-card--sk .mb-card__h b { color: var(--text-dim); }
.mb-card--sk .mb-card__h .mi { opacity: .45; }
.mb-sk { display: flex; flex-direction: column; gap: 9px; }
.mb-sk__l, .mb-sk__ring { display: block; border-radius: 6px;
  background: linear-gradient(90deg, var(--soft) 25%, var(--softer) 50%, var(--soft) 75%);
  background-size: 400% 100%; animation: mb-sheen 1.6s ease-in-out infinite; }
.mb-sk__l { height: 11px; }
.mb-sk__ring { width: 112px; height: 112px; border-radius: 50%; margin: 2px auto 8px; }
@keyframes mb-sheen { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .mb-sk__l, .mb-sk__ring { animation: none; } }

/* Which brief am I looking at? The stored 06:00 run and a live one look identical on
   the page, so the difference has to be stated — a brief that silently switches between
   cached and freshly-written is a brief whose timestamp nobody can trust. */
.mb-stamp { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--soft); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }
.mb-stamp .mi { width: 12px; height: 12px; }
.mb-stamp.is-live { background: var(--mint-tint); border-color: #cdeede; color: var(--mint-ink); }
[data-theme="dark"] .mb-stamp.is-live { border-color: #1d4a3a; }
@media (max-width: 700px) { .mb-stamp span { display: none; } .mb-stamp { padding: 5px 7px; } }

/* ============================================================================
   Role scope, made visible.

   Access control you cannot see is access control nobody in the room believes.
   The chip states what the current role can reach, and — when something is being
   withheld — how much, so "the consultant sees only their own leads" is a claim
   the audience can check rather than take on trust.
   ========================================================================== */
.pf-scope { display: inline-flex; align-items: center; gap: 7px; flex: none; max-width: 380px;
  padding: 5px 11px; border-radius: var(--r-pill); background: var(--soft); border: 1px solid var(--line); }
.pf-scope .mi { width: 14px; height: 14px; flex: none; color: var(--mint-700); }
.pf-scope > span { font-size: 11.5px; font-weight: 600; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-scope__off { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #92590b; background: var(--warn-soft); border-radius: 5px;
  padding: 2px 6px; font-style: normal; white-space: nowrap; flex: none; }
@media (max-width: 1400px) { .pf-scope { max-width: 240px; } }
@media (max-width: 1100px) { .pf-scope__off { display: none; } }
@media (max-width: 900px)  { .pf-scope { max-width: 100%; order: 9; } }

/* ---- Management's ask box + answers -------------------------------------------
   The brief answers "what happened"; this answers "why" and "what if". It sits
   directly under the header, above the panels, because the question a brief
   provokes arrives while you are still reading it. */
.mb-ask { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
.mb-ask:focus-within { border-color: var(--mint); box-shadow: 0 0 0 3px var(--mint-tint); }
.mb-ask__ic { display: inline-flex; flex: none; }
.mb-ask__ic .mi { width: 16px; height: 16px; color: var(--mint-700); }
.mb-ask__field { flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font: inherit; font-size: 14px; color: var(--text-1); }
.mb-ask__field::placeholder { color: var(--text-dim); }
.mb-ask__go { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%; background: var(--mint); transition: filter .15s; }
.mb-ask__go .mi { width: 16px; height: 16px; color: #fff; }
.mb-ask__go:hover { filter: brightness(1.06); }

.mb-answers { display: flex; flex-direction: column; gap: 10px; }
.mb-answers:empty { display: none; }
.mb-ans { border: 1px solid #cdeede; border-radius: var(--r-lg); background: var(--mint-tint-2); overflow: hidden; }
.mb-ans__q { display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; }
.mb-ans__q .mi { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--mint-700); }
.mb-ans__q > span { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--text-1); line-height: 1.5; }
.mb-ans__x { flex: none; width: 22px; height: 22px; border-radius: 50%; color: var(--text-dim);
  font-size: 12px; line-height: 1; transition: background .15s, color .15s; }
.mb-ans__x:hover { background: var(--soft); color: var(--text-1); }
.mb-ans__a { padding: 0 14px 14px 39px; font-size: 13.5px; line-height: 1.65; color: var(--text-2); }
.mb-ans__a.is-loading { padding-top: 2px; }
.mb-ans__a p { margin-bottom: 8px; }
.mb-ans__a p:last-child { margin-bottom: 0; }
.mb-ans__a strong, .mb-ans__a b { color: var(--text-1); font-weight: 700; }
.mb-ans__a ul, .mb-ans__a ol { padding-left: 20px; margin: 6px 0 8px; }
.mb-ans__a li { margin-bottom: 4px; }
.mb-ans__a table { border-collapse: collapse; font-size: 12.5px; margin: 6px 0; display: block; overflow-x: auto; }
.mb-ans__a th, .mb-ans__a td { border: 1px solid var(--line); padding: 5px 9px; text-align: left; }
[data-theme="dark"] .mb-ans { border-color: #1d4a3a; }
@media (max-width: 620px) { .mb-ans__a { padding-left: 14px; } }

/* The capture rig's ?focus= selector gets a soft ring so a video frame reads as
   "this panel" rather than "somewhere on this page". Harmless in normal use. */
.is-focus { outline: 2px solid var(--mint); outline-offset: 6px; border-radius: var(--r-lg);
  transition: outline-color .3s; }

/* Capture mode: no motion, so a headless screenshot is deterministic. */
.is-still *, .is-still *::before, .is-still *::after {
  animation: none !important; transition: none !important; }

/* ---- REQ 4 · the coach card ---------------------------------------------------
   The draft is the point. A consultant who has to rewrite the message did not get
   a draft, so it is presented as a thing to copy and send, not as advice. */
.co-queue { display: flex; flex-direction: column; gap: 8px; }
.co-q { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start;
  padding: 11px 13px; background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--line); border-radius: var(--r-md); }
.co-q.crit { border-left-color: var(--danger); }
.co-q.warn { border-left-color: var(--warn); }
.co-q.ok   { border-left-color: var(--mint); }
.co-q__n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--soft); font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
.co-q__h { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.co-q__h b { font-size: 13.5px; }
.co-q__m { font-size: 12px; color: var(--text-soft); }
.co-q__v { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--mint-ink); margin-left: auto; }
.co-q__b p { font-size: 12.5px; line-height: 1.55; color: var(--text-2); margin-top: 4px; }
.co-q__do { color: var(--mint-ink) !important; display: flex; gap: 6px; align-items: flex-start; }
.co-q__do .mi { width: 13px; height: 13px; flex: none; margin-top: 3px; }
.co-q__do i { font-style: normal; color: var(--text-dim); }

.co-msg { border: 1px solid #cdeede; border-radius: var(--r-lg); background: var(--mint-tint-2); overflow: hidden; }
.co-msg__body { padding: 14px 16px; font-size: 14px; line-height: 1.7; color: var(--text-1); white-space: pre-wrap; }
.co-msg__foot { display: flex; align-items: center; gap: 12px; padding: 9px 14px;
  border-top: 1px solid #cdeede; background: var(--surface); }
.co-msg__foot > span { flex: 1; min-width: 0; display: inline-flex; gap: 5px; align-items: center;
  font-size: 11.5px; color: var(--text-dim); }
.co-msg__foot .mi { width: 13px; height: 13px; flex: none; }
.co-msg__copy { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 13px;
  border-radius: var(--r-pill); background: var(--mint); color: #fff; font-size: 12px; font-weight: 700;
  transition: filter .15s; }
.co-msg__copy:hover { filter: brightness(1.06); }
.co-msg__copy.is-done { background: var(--mint-ink); }

.co-objs { display: flex; flex-direction: column; gap: 9px; }
.co-obj { padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.co-obj__q { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; font-weight: 700;
  color: var(--text-1); line-height: 1.5; }
.co-obj__q .mi { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--warn); }
.co-obj__r, .co-obj__p, .co-obj__a { font-size: 12.5px; line-height: 1.55; color: var(--text-2); margin-top: 6px; }
.co-obj__a { color: var(--mint-ink); display: flex; gap: 6px; align-items: flex-start; }
.co-obj__a .mi { width: 13px; height: 13px; flex: none; margin-top: 3px; }
.co-obj b { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-dim); }
.co-obj__a b { color: inherit; }

.co-skill { padding: 13px 15px; background: var(--warn-soft); border: 1px solid #f0d089; border-radius: var(--r-md); }
.co-skill > b { font-size: 13.5px; }
.co-skill p { font-size: 12.5px; line-height: 1.55; color: var(--text-2); margin-top: 5px; }
.co-skill__d, .co-skill__e { display: flex; gap: 6px; align-items: flex-start; }
.co-skill__d .mi, .co-skill__e .mi { width: 13px; height: 13px; flex: none; margin-top: 3px; }
.co-skill__e { color: var(--mint-ink) !important; }
[data-theme="dark"] .co-msg, [data-theme="dark"] .co-msg__foot { border-color: #1d4a3a; }
[data-theme="dark"] .co-skill { border-color: #56431a; }

/* prose that accompanies a card in the management answer panel */
.mb-ans__p { margin-bottom: 10px; }
.mb-ans__p:last-child { margin-bottom: 0; }