/* Next steps + assumed values cards (STUDIO_SUGGEST_CARDS; shared/nextsteps.js), both lanes. The ask / proposal card's
   visual language (next/next.css .prop, .prop-h .k, .diff, .choices, .prop-why, .prop-a, .state), scoped to .nsx so the
   Design page (no next.css) and the Jobs page draw the same card. */
.nsx-host:empty { display: none; }
.nsx.prop { border: 1px solid var(--line-2); border-radius: 10px; background: var(--raise); overflow: hidden; margin: 8px 0; max-width: 640px; }
.nsx .prop-h { padding: 9px 12px; font-size: var(--fs-meta); font-weight: 650; color: var(--ink-2); border-bottom: 1px solid var(--line); display: flex; gap: 8px; align-items: center; }
.nsx .prop-h .k { font-size: var(--fs-meta); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ok); }
.nsx.ns-assumed .prop-h .k { color: var(--warn); }          /* an assumption is not data: the amber of "Decided for you" */
.nsx .prop-why { padding: 0 12px 10px; font-size: var(--fs-meta); color: var(--ink-3); }
.nsx .prop-a { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.nsx.done { opacity: .75; }
.nsx.busy { opacity: .7; }
.nsx .ns-steps { padding: 10px 12px; display: grid; gap: 8px; }
.nsx .ns-step { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nsx .ns-label { font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.nsx .choices { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; }
.nsx .diff { padding: 10px 12px; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: var(--fs-ui); align-items: start; }
.nsx .diff .f { color: var(--ink-3); padding-top: 3px; }
.nsx .diff .ch { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; min-width: 0; }
.nsx .diff .ch b { font-family: var(--mono); font-weight: 650; color: var(--ink); white-space: nowrap; }
.nsx .ns-used { font-size: var(--fs-meta); color: var(--ink-3); flex-basis: 100%; }
.nsx .ns-acts { display: flex; gap: 6px; }
.nsx .ns-ok { font-size: var(--fs-meta); color: var(--ok); font-weight: 600; }
.nsx .ns-chg { font-size: var(--fs-meta); color: var(--ink-2); }
.nsx .ns-edit { display: grid; gap: 6px; flex-basis: 100%; }
.nsx .ns-will { font-size: var(--fs-meta); color: var(--warn); }
.nsx .ns-in { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex-basis: 100%; }
.nsx .ns-in input { width: 9em; padding: 4px 8px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; }
.nsx .muted { color: var(--ink-3); }
/* review H2: what a click sends and lets run, under its button (small, wraps on a phone) */
.nsx .ns-sends, .nsx .ns-allows { flex-basis: 100%; font-size: var(--fs-meta); color: var(--ink-3); overflow-wrap: anywhere; }
.nsx .ns-sends q { color: var(--ink-2); }
.nsx .ns-allows { color: var(--warn); }
@media (max-width: 760px), (pointer: coarse) { .nsx .btn { min-height: 44px; } .nsx .ns-in input { min-height: 44px; } }