/* Northstar Capital OS: guided agent operations with an explicit approval boundary. */ #demo-dialog.is-northstar { width: min(1320px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: clamp(16px, 2.2vw, 28px); border: 1px solid #d5dbd9; border-radius: 9px; background: #faf9f5; color: #2f4148; overflow-y: auto; box-shadow: 0 30px 100px #15252855; } #demo-dialog.is-northstar::backdrop { background: #1c2a30b8; backdrop-filter: blur(8px); } #demo-dialog.is-northstar [data-close-demo] { color: #2f4148; background: #faf9f5; border-color: #d0d8d5; border-radius: 5px; } #demo-dialog.is-northstar #demo-title { max-width: none; margin: 5px 60px 10px 0; font-size: clamp(24px, 2.5vw, 33px); font-weight: 700; letter-spacing: -.04em; line-height: 1.2; } #demo-dialog.is-northstar #demo-description { margin: 0 60px 19px 0; max-width: 90ch; color: #2f4148; font-size: 14px; line-height: 1.65; } #demo-dialog.is-northstar .demo-disclosure { margin-bottom: 12px; color: #53666f; font-size: 10px; line-height: 1.6; letter-spacing: .045em; } #demo-dialog.is-northstar .demo-modal-controls { gap: 22px; margin-top: 22px; } #demo-dialog.is-northstar #demo-step-label { color: #53666f; font-size: 11px; letter-spacing: .04em; } #demo-dialog.is-northstar :is([data-demo-prev], [data-demo-next], .demo-progress-button) { min-height: 44px; border-color: #c4d2cc; border-radius: 4px; color: #2f4148; font-size: 13px; } #demo-dialog.is-northstar [data-demo-next] { background: #196a5e; border-color: #196a5e; color: #fff; } #demo-dialog.is-northstar .demo-progress-button.is-active { background: #e1eee8; border-color: #85b5a2; color: #2f4148; } #demo-dialog.is-northstar :is(button, a, summary):focus-visible { outline: 3px solid #327b6c; outline-offset: 4px; } #demo-dialog.is-northstar .na-shell { --na-ink: #263532; --na-muted: #5d6a66; --na-line: #e0e6e2; --na-teal: #276f61; --na-soft: #f3f4ef; container: northstar-workspace / inline-size; min-width: 0; overflow: hidden; border: 1px solid #d3dcd7; border-radius: 7px; background: #f4f4ef; color: var(--na-ink); font: 13px/1.6 'Geist', Arial, sans-serif; letter-spacing: 0; box-shadow: 0 12px 32px #173c2a08; } #demo-dialog.is-northstar .na-shell :where(h3, h4, h5, p, ol, ul, dl, blockquote) { margin: 0; } #demo-dialog.is-northstar .na-shell :is(h3, h4, h5) { font-family: inherit; color: var(--na-ink); } #demo-dialog.is-northstar .na-shell * { min-width: 0; word-break: normal; overflow-wrap: normal; hyphens: none; } #demo-dialog.is-northstar .na-shell :is(button, a) { min-height: 44px; } #demo-dialog.is-northstar .na-shell button { appearance: none; -webkit-appearance: none; font-family: 'Geist', Arial, sans-serif; font-size: 13px; line-height: 1.5; } #demo-dialog.is-northstar .na-shell :where(ul, ol) { padding: 0; list-style: none; } #demo-dialog.is-northstar .na-shell dd { margin-left: 0; } #demo-dialog.is-northstar .na-topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 24px; border-bottom: 1px solid var(--na-line); background: #fff; } #demo-dialog.is-northstar .na-brand { display: flex; align-items: center; gap: 12px; } #demo-dialog.is-northstar .na-brand > svg { flex: 0 0 30px; width: 30px; height: 30px; color: #386b64; } #demo-dialog.is-northstar .na-brand-name strong { display: block; color: #2f4148; font-size: 20px; line-height: 1.1; letter-spacing: -.035em; font-weight: 650; } #demo-dialog.is-northstar .na-brand-name small { display: block; margin-top: 5px; font: 10px/1.5 var(--mono, monospace); letter-spacing: .065em; color: #53666f; } #demo-dialog.is-northstar .na-top-meta { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 12px; color: #53666f; font: 10px/1.6 var(--mono, monospace); } #demo-dialog.is-northstar .na-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); } #demo-dialog.is-northstar .na-rail { display: flex; flex-direction: column; gap: 7px; padding: 24px 12px 19px; border-right: 1px solid #dce3dd; background: #eeefe9; } #demo-dialog.is-northstar .na-rail button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 10px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #53666f; font-size: 13px; text-align: left; } #demo-dialog.is-northstar .na-nav-number { flex: 0 0 22px; color: #53666f; font: 10px/1.6 var(--mono, monospace); } #demo-dialog.is-northstar .na-rail button.is-current { background: #e0ebe3; border-color: #c9dcd0; color: #2f4148; box-shadow: inset 2px 0 #3d8a6c; font-weight: 600; } #demo-dialog.is-northstar .na-rail button:hover { background: #e7ece5; } #demo-dialog.is-northstar .na-rail-note { margin-top: auto; padding: 30px 10px 0; color: #53666f; font-size: 11px; line-height: 1.75; } #demo-dialog.is-northstar .na-rail-note strong { display: block; margin-bottom: 6px; color: #2f4148; font-size: 11px; font-weight: 600; } #demo-dialog.is-northstar .na-main { padding: 25px 25px 27px; } #demo-dialog.is-northstar .na-screen-heading { position: relative; margin-bottom: 22px; } #demo-dialog.is-northstar .na-screen-heading > small { display: block; margin-bottom: 8px; color: #53666f; font: 10px/1.6 var(--mono, monospace); letter-spacing: .055em; } #demo-dialog.is-northstar .na-screen-heading h3 { margin-right: 160px; font-size: clamp(24px, 2.3vw, 30px); line-height: 1.2; font-weight: 650; letter-spacing: -.035em; } #demo-dialog.is-northstar .na-screen-heading p { margin-top: 9px; max-width: 75ch; color: var(--na-muted); font-size: 13px; line-height: 1.7; } #demo-dialog.is-northstar .na-screen-heading > .na-badge { position: absolute; right: 0; top: 29px; } #demo-dialog.is-northstar .na-badge { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 8px; border: 1px solid #c8dbd0; border-radius: 4px; background: #e9f2ed; color: #32664e; font: 10px/1.5 var(--mono, monospace); } #demo-dialog.is-northstar .na-badge.is-amber { background: #fbf0dc; border-color: #ecdbb9; color: #7e5f2b; } #demo-dialog.is-northstar .na-case-bar { display: grid; grid-template-columns: .8fr .9fr 1.1fr 1.1fr; padding: 17px 0; margin-bottom: 22px; border-top: 1px solid #dbe3dd; border-bottom: 1px solid #dbe3dd; } #demo-dialog.is-northstar .na-meta { padding: 0 17px; border-left: 1px solid #dce4de; } #demo-dialog.is-northstar .na-meta:first-child { padding-left: 0; border-left: 0; } #demo-dialog.is-northstar .na-meta small { display: block; margin-bottom: 5px; color: #53666f; font: 10px/1.6 var(--mono, monospace); letter-spacing: .025em; } #demo-dialog.is-northstar .na-meta strong { display: block; font-size: 14px; font-weight: 550; line-height: 1.5; color: #2f4148; font-variant-numeric: tabular-nums; } #demo-dialog.is-northstar .na-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .9fr); align-items: start; gap: 18px; } #demo-dialog.is-northstar .na-panel { min-width: 0; overflow: hidden; border: 1px solid var(--na-line); border-radius: 6px; background: #fff; } #demo-dialog.is-northstar .na-panel + .na-panel { margin-top: 18px; } #demo-dialog.is-northstar .na-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--na-line); } #demo-dialog.is-northstar .na-panel-head h4 { font-size: 14px; line-height: 1.5; font-weight: 600; letter-spacing: -.015em; } #demo-dialog.is-northstar .na-panel-head > small { color: #53666f; font: 10px/1.6 var(--mono, monospace); } #demo-dialog.is-northstar .na-panel-body { padding: 20px; } #demo-dialog.is-northstar .na-panel-body > p { color: var(--na-muted); font-size: 13px; line-height: 1.75; } #demo-dialog.is-northstar .na-reference-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; } #demo-dialog.is-northstar .na-reference { padding: 15px; border: 1px solid #e0e4e0; border-radius: 5px; background: #f6f7f3; } #demo-dialog.is-northstar .na-reference.is-original { border-color: #e7d9bd; background: #fcf6e9; } #demo-dialog.is-northstar .na-reference.is-source { border-color: #cedfd4; background: #f0f6f1; } #demo-dialog.is-northstar .na-reference small { display: block; color: #53666f; font: 10px/1.6 var(--mono, monospace); } #demo-dialog.is-northstar .na-reference code { display: block; margin-top: 9px; color: #2f4148; font: 15px/1.5 var(--mono, monospace); font-weight: 550; } #demo-dialog.is-northstar .na-reference.is-original code { color: #80602c; } #demo-dialog.is-northstar .na-reference p { margin-top: 8px; color: #53666f; font-size: 13px; line-height: 1.6; } #demo-dialog.is-northstar .na-facts { display: grid; gap: 0; } #demo-dialog.is-northstar .na-facts > div { display: grid; grid-template-columns: minmax(90px, .8fr) minmax(0, 1.2fr); gap: 17px; padding: 13px 0; border-bottom: 1px solid #e9ede7; } #demo-dialog.is-northstar .na-facts > div:last-child { border-bottom: 0; padding-bottom: 0; } #demo-dialog.is-northstar .na-facts dt { color: #53666f; font-size: 12px; } #demo-dialog.is-northstar .na-facts dd { color: #2f4148; font-size: 13px; line-height: 1.65; } #demo-dialog.is-northstar .na-callout { margin-top: 18px; padding: 16px; border: 1px solid #d8e5dc; border-radius: 5px; background: #f0f6f1; color: #2f4148; font-size: 13px; line-height: 1.7; } #demo-dialog.is-northstar .na-callout strong { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; } #demo-dialog.is-northstar .na-callout.is-amber { border-color: #e8ddc9; background: #fcf6e9; color: #7b6238; } #demo-dialog.is-northstar .na-trace { display: grid; gap: 0; } #demo-dialog.is-northstar .na-trace > li { position: relative; display: grid; grid-template-columns: 13px minmax(0, 1fr); gap: 13px; padding: 0 0 23px; } #demo-dialog.is-northstar .na-trace > li:not(:last-child)::before { content: ''; position: absolute; top: 11px; left: 5px; bottom: -1px; border-left: 1px solid #d3e0d5; } #demo-dialog.is-northstar .na-trace > li:last-child { padding-bottom: 0; } #demo-dialog.is-northstar .na-trace-dot { position: relative; margin-top: 5px; width: 11px; height: 11px; border-radius: 50%; border: 1px solid #a9c6b4; background: #ecf3ec; } #demo-dialog.is-northstar .na-trace strong { display: block; font-size: 13px; line-height: 1.6; font-weight: 550; color: #2f4148; } #demo-dialog.is-northstar .na-trace small { display: block; margin-top: 5px; font-size: 12px; line-height: 1.65; color: #53666f; } #demo-dialog.is-northstar .na-action-row { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 20px 0 0; } #demo-dialog.is-northstar .na-action-row > p { max-width: 60ch; color: #386b64; font-size: 12px; line-height: 1.7; } #demo-dialog.is-northstar .na-action { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 11px 15px; flex: 0 0 auto; border: 1px solid #216a58; border-radius: 4px; background: #216a58; color: #fff; text-align: left; font-size: 13px; line-height: 1.5; font-weight: 550; } #demo-dialog.is-northstar .na-action:hover { background: #155340; } #demo-dialog.is-northstar .na-action > svg { width: 18px; height: 18px; flex: 0 0 18px; } #demo-dialog.is-northstar .na-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 13px; border: 1px solid #c8d5ca; border-radius: 4px; background: #fff; color: #48614e; font-size: 13px; line-height: 1.5; } #demo-dialog.is-northstar .na-secondary:hover { background: #f0f4ee; } #demo-dialog.is-northstar .na-coordination { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(245px, .9fr); gap: 18px; align-items: start; } #demo-dialog.is-northstar .na-network { position: relative; width: 100%; aspect-ratio: 640 / 420; overflow: hidden; border: 1px solid #e0e6df; border-radius: 6px; background: radial-gradient(ellipse at center, #e6f0e7 0%, #f7f8f3 58%, #fff 100%); } #demo-dialog.is-northstar .na-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } #demo-dialog.is-northstar .na-wires path { stroke: #a9c4b0; stroke-width: 1.3; fill: none; } #demo-dialog.is-northstar .na-wires path.is-active { stroke: #4e9975; stroke-width: 2; stroke-dasharray: 5 8; animation: na-flow 1.7s linear infinite; } #demo-dialog.is-northstar .na-agent { position: absolute; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 28.125%; min-height: 105px; padding: 13px 15px; border: 1px solid #d0dcd1; border-radius: 6px; background: #fff; color: #2f4148; box-shadow: 0 5px 15px #28452b08; transform: translate(-50%, -50%); text-align: left; transition: border-color .25s, box-shadow .25s, background .25s; } #demo-dialog.is-northstar .na-agent > svg { position: absolute; right: 11px; top: 12px; width: 18px; height: 18px; color: #386b64; } #demo-dialog.is-northstar .na-agent small { display: block; color: #53666f; font: 10px/1.5 var(--mono, monospace); } #demo-dialog.is-northstar .na-agent strong { display: block; margin-top: 8px; font-size: 13px; line-height: 1.4; font-weight: 600; color: #2f4148; } #demo-dialog.is-northstar .na-agent > span { display: block; margin-top: 6px; color: #53666f; font-size: 10px; line-height: 1.5; } #demo-dialog.is-northstar .na-agent-0 { left: 20.625%; top: 19.524%; } #demo-dialog.is-northstar .na-agent-1 { left: 79.375%; top: 19.524%; } #demo-dialog.is-northstar .na-agent-2 { left: 20.625%; top: 80.476%; } #demo-dialog.is-northstar .na-agent-3 { left: 79.375%; top: 80.476%; } #demo-dialog.is-northstar .na-agent.is-active { border-color: #51916b; background: #f8fcf7; box-shadow: 0 0 0 3px #b4d9bc59, 0 6px 20px #28452b10; } #demo-dialog.is-northstar .na-agent.is-done { border-color: #9dbfa5; background: #f4f9f1; } #demo-dialog.is-northstar .na-agent.is-done > span { color: #2f4148; } #demo-dialog.is-northstar .na-core { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; width: 22%; max-width: 140px; min-height: 115px; padding: 15px 8px; border: 1px solid #bdcfbf; border-radius: 50%; background: #fff; box-shadow: 0 0 0 10px #edf3e8b0; transform: translate(-50%, -50%); text-align: center; } #demo-dialog.is-northstar .na-core svg { width: 28px; height: 28px; color: #386b64; } #demo-dialog.is-northstar .na-core strong { font-size: 13px; font-weight: 600; line-height: 1.35; color: #2f4148; } #demo-dialog.is-northstar .na-core small { max-width: 100%; color: #53666f; font: 10px/1.6 var(--mono, monospace); } #demo-dialog.is-northstar .na-agent-detail { padding: 21px; border: 1px solid #d6e0d4; border-radius: 6px; background: #fff; } #demo-dialog.is-northstar .na-agent-detail > small { display: block; margin-bottom: 12px; color: #53666f; font: 10px/1.6 var(--mono, monospace); letter-spacing: .035em; } #demo-dialog.is-northstar .na-agent-detail h4 { margin-bottom: 10px; color: #2f4148; font-size: 20px; line-height: 1.25; letter-spacing: -.025em; font-weight: 550; } #demo-dialog.is-northstar .na-agent-detail > p { color: #53666f; font-size: 13px; line-height: 1.75; } #demo-dialog.is-northstar .na-detail-output { margin-top: 22px; padding: 15px; border: 1px solid #d7e3d3; border-radius: 4px; background: #f2f7ee; } #demo-dialog.is-northstar .na-detail-output small { display: block; color: #53666f; font: 10px/1.6 var(--mono, monospace); margin-bottom: 7px; } #demo-dialog.is-northstar .na-detail-output strong { display: block; color: #2f4148; font-size: 13px; font-weight: 550; line-height: 1.7; } #demo-dialog.is-northstar .na-motion-controls { display: flex; align-items: center; gap: 10px; padding: 17px 0 0; } #demo-dialog.is-northstar .na-motion-controls > span { margin-left: auto; text-align: right; color: #53666f; font: 10px/1.6 var(--mono, monospace); } #demo-dialog.is-northstar .na-workflow-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; padding-top: 22px; } #demo-dialog.is-northstar .na-workflow-track > :is(span, div, li) { min-width: 0; padding: 10px 7px; border-top: 2px solid #d7dfd3; color: #53666f; font-size: 10px; line-height: 1.6; } #demo-dialog.is-northstar .na-workflow-track > .is-current { border-color: #4a8654; color: #2f4148; background: #edf4e8; } #demo-dialog.is-northstar .na-workflow-track > .is-done { border-color: #abc6a5; color: #53666f; } #demo-dialog.is-northstar .na-review-person { display: flex; gap: 13px; align-items: center; padding: 19px 20px; border-bottom: 1px solid #e1e8de; } #demo-dialog.is-northstar .na-review-person > span:first-child { display: inline-grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; background: #e8eee2; color: #53666f; font-size: 12px; } #demo-dialog.is-northstar .na-review-person strong { display: block; font-size: 14px; color: #2f4148; font-weight: 550; } #demo-dialog.is-northstar .na-review-person small { display: block; margin-top: 3px; color: #53666f; font-size: 12px; } #demo-dialog.is-northstar .na-change-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding-block: 20px; border-bottom: 1px solid #e3e9dd; } #demo-dialog.is-northstar .na-change-line > div small { display: block; margin-bottom: 6px; color: #53666f; font: 10px/1.6 var(--mono, monospace); } #demo-dialog.is-northstar .na-change-line > div strong, #demo-dialog.is-northstar .na-change-line > div code { display: block; font: 14px/1.6 var(--mono, monospace); color: #2f4148; } #demo-dialog.is-northstar .na-change-line > span { color: #53666f; font-size: 20px; } #demo-dialog.is-northstar .na-review-checks { display: grid; gap: 0; padding-block: 10px; } #demo-dialog.is-northstar .na-review-checks > :is(div, li) { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid #e3e9dd; color: #53666f; font-size: 13px; line-height: 1.7; } #demo-dialog.is-northstar .na-review-checks svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; color: #386b64; } #demo-dialog.is-northstar .na-review-decision { padding: 18px 20px; border-top: 1px solid #dbe5d3; background: #f4f8ef; } #demo-dialog.is-northstar .na-review-decision > p { margin-bottom: 15px; color: #53666f; font-size: 13px; line-height: 1.7; } #demo-dialog.is-northstar .na-outcome-banner { display: flex; align-items: flex-start; gap: 15px; padding: 21px; border: 1px solid #cbdcc0; border-radius: 6px; background: #eff6e8; margin-bottom: 20px; } #demo-dialog.is-northstar .na-outcome-banner > svg { flex: 0 0 26px; width: 26px; height: 26px; color: #386b64; } #demo-dialog.is-northstar .na-outcome-banner strong { display: block; color: #2f4148; font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1.4; } #demo-dialog.is-northstar .na-outcome-banner p { margin-top: 7px; color: #53666f; font-size: 13px; line-height: 1.7; } #demo-dialog.is-northstar .na-result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; } #demo-dialog.is-northstar .na-result { padding: 19px; border: 1px solid #dce5d4; border-radius: 5px; background: #fff; } #demo-dialog.is-northstar .na-result small { display: block; color: #53666f; font: 10px/1.6 var(--mono, monospace); } #demo-dialog.is-northstar .na-result strong { display: block; margin-top: 9px; color: #2f4148; font-size: 24px; font-weight: 550; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1.3; } #demo-dialog.is-northstar .na-result > span { display: block; margin-top: 7px; color: #53666f; font-size: 12px; line-height: 1.65; } #demo-dialog.is-northstar .na-match-table { width: 100%; border-collapse: collapse; table-layout: fixed; } #demo-dialog.is-northstar .na-match-table :is(th, td) { padding: 14px 18px; border-bottom: 1px solid #e1e8d9; text-align: left; vertical-align: top; } #demo-dialog.is-northstar .na-match-table th { background: #f7f9f3; color: #53666f; font: 10px/1.6 var(--mono, monospace); } #demo-dialog.is-northstar .na-match-table td { font-size: 13px; line-height: 1.65; color: #2f4148; } #demo-dialog.is-northstar .na-match-table tr:last-child td { border-bottom: 0; } #demo-dialog.is-northstar .na-reconciled-note { margin-top: 17px; padding: 17px; border: 1px solid #d5e3ca; border-radius: 5px; background: #f5f9ef; color: #53666f; font-size: 13px; line-height: 1.7; } #demo-dialog.is-northstar .na-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 24px; border-top: 1px solid #dce6d4; background: #fff; color: #53666f; font: 10px/1.7 var(--mono, monospace); } @keyframes na-flow { to { stroke-dashoffset: -26; } } /* Authored record, graph and review details. */ #demo-dialog.is-northstar .na-shell svg { flex-shrink: 0; display: block; width: 20px; height: 20px; } #demo-dialog.is-northstar .na-brand > svg { width: 30px; height: 30px; } #demo-dialog.is-northstar .na-rail nav { display: grid; gap: 7px; } #demo-dialog.is-northstar .na-rail-note > svg { margin-bottom: 12px; color: #386b64; } #demo-dialog.is-northstar .na-rail-note > small { display: block; margin-top: 18px; font: 10px/1.6 var(--mono, monospace); } #demo-dialog.is-northstar .na-screen-heading > div > small { display: block; margin-bottom: 8px; color: #5c6d70; font: 10px/1.6 var(--mono, monospace); letter-spacing: .045em; } #demo-dialog.is-northstar .na-badge.is-success { color: #296858; border-color: #bfddcf; background: #e9f3ed; } #demo-dialog.is-northstar .na-reference code > span { padding: 0 1px; border-bottom: 1px solid currentColor; } #demo-dialog.is-northstar .na-reference > .na-badge { margin-top: 12px; } #demo-dialog.is-northstar .na-callout { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 5px 11px; } #demo-dialog.is-northstar .na-callout > svg { grid-column: 1; grid-row: 1 / 3; margin-top: 1px; } #demo-dialog.is-northstar .na-callout > strong { grid-column: 2; margin-bottom: 0; } #demo-dialog.is-northstar .na-callout > p { grid-column: 2; } #demo-dialog.is-northstar .na-hold .na-callout { margin-top: 0; margin-bottom: 24px; } #demo-dialog.is-northstar .na-action-row > p strong { display: block; margin-bottom: 3px; color: #3f5359; font-size: 13px; font-weight: 550; } #demo-dialog.is-northstar .na-action-row > p span { display: block; font-size: 13px; } #demo-dialog.is-northstar .na-secondary svg { width: 18px; height: 18px; } #demo-dialog.is-northstar .na-network-panel { padding-bottom: 16px; } #demo-dialog.is-northstar .na-network-panel .na-panel-head { padding-inline: 17px; } #demo-dialog.is-northstar .na-network-panel .na-panel-head h4 { font-size: 13px; } #demo-dialog.is-northstar .na-network-panel .na-panel-head .na-badge { font-size: 10px; } #demo-dialog.is-northstar .na-network { border: 0; border-bottom: 1px solid #e2e8e3; border-radius: 0; } #demo-dialog.is-northstar .na-network > .na-wires { width: 100%; height: 100%; } #demo-dialog.is-northstar .na-wires .na-signal { stroke: #398875; stroke-width: 2; stroke-dasharray: 8 92; opacity: 0; } #demo-dialog.is-northstar .na-flow[data-phase="0"] .na-signal-0, #demo-dialog.is-northstar .na-flow[data-phase="1"] .na-signal-1, #demo-dialog.is-northstar .na-flow[data-phase="2"] .na-signal-2, #demo-dialog.is-northstar .na-flow[data-phase="3"] .na-signal-3 { opacity: 1; } #demo-dialog.is-northstar .na-flow[data-playing="true"][data-phase="0"] .na-signal-0, #demo-dialog.is-northstar .na-flow[data-playing="true"][data-phase="1"] .na-signal-1, #demo-dialog.is-northstar .na-flow[data-playing="true"][data-phase="2"] .na-signal-2, #demo-dialog.is-northstar .na-flow[data-playing="true"][data-phase="3"] .na-signal-3 { animation: na-handoff 2.4s linear infinite; } #demo-dialog.is-northstar .na-agent[aria-pressed="true"] { border-color: #3d8773; box-shadow: 0 0 0 2px #bcd9ce80; } #demo-dialog.is-northstar .na-agent > svg { width: 18px; height: 18px; } #demo-dialog.is-northstar .na-core svg { width: 28px; height: 28px; } #demo-dialog.is-northstar .na-core small { max-width: 94px; font-size: 10px; } #demo-dialog.is-northstar .na-detail-boundary { display: flex; align-items: flex-start; gap: 9px; margin-top: 18px; padding-top: 17px; border-top: 1px solid #e2e8e1; color: #53666f; font-size: 12px; line-height: 1.7; } #demo-dialog.is-northstar .na-detail-boundary svg { width: 16px; height: 16px; margin-top: 3px; color: #386b64; } #demo-dialog.is-northstar .na-agent-detail .na-team-context { margin-top: 17px; color: #53666f; font-size: 12px; line-height: 1.7; } #demo-dialog.is-northstar .na-motion-controls { padding: 15px 17px 0; flex-wrap: wrap; gap: 8px; } #demo-dialog.is-northstar .na-motion-controls > button { min-height: 44px; padding: 9px 12px; border: 1px solid #cbd8d1; border-radius: 4px; background: #fff; color: #2f4148; font-size: 12px; } #demo-dialog.is-northstar .na-motion-controls > button:hover { background: #f2f6f1; } #demo-dialog.is-northstar .na-motion-controls > span { font-size: 10px; } #demo-dialog.is-northstar .na-workflow-track > li { display: flex; align-items: flex-start; gap: 7px; font-size: 11px; } #demo-dialog.is-northstar .na-workflow-track > li > span { flex: 0 0 18px; font: 10px/1.6 var(--mono, monospace); } #demo-dialog.is-northstar .na-motion-summary { margin: 17px 0 0; padding: 13px 16px; border-left: 2px solid #a5c7b8; background: #f7f9f5; color: #53666f; font-size: 13px; line-height: 1.7; } #demo-dialog.is-northstar .na-review-person { padding: 0 0 20px; } #demo-dialog.is-northstar .na-review-copy { margin-top: 20px; } #demo-dialog.is-northstar .na-change-line { padding-top: 0; } #demo-dialog.is-northstar .na-review-checks > span { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid #e3e9e2; color: #53666f; font-size: 13px; line-height: 1.65; } #demo-dialog.is-northstar .na-review-checks > span:last-child { border-bottom: 0; } #demo-dialog.is-northstar .na-review-decision { margin: 20px -20px -20px; padding: 20px; } #demo-dialog.is-northstar .na-review-decision > .na-action { width: 100%; } #demo-dialog.is-northstar .na-review-decision > small { display: block; margin-top: 10px; color: #53666f; font-size: 11px; line-height: 1.65; text-align: center; } #demo-dialog.is-northstar .na-outcome-banner > div { flex: 1; } #demo-dialog.is-northstar .na-outcome-banner small { display: block; margin-bottom: 7px; color: #53666f; font: 10px/1.6 var(--mono, monospace); } #demo-dialog.is-northstar .na-outcome-banner h4 { color: #2f4148; font-size: 23px; font-weight: 550; line-height: 1.3; letter-spacing: -.03em; } #demo-dialog.is-northstar .na-outcome-banner > svg { width: 26px; height: 26px; } #demo-dialog.is-northstar .na-result > svg { width: 21px; height: 21px; margin-bottom: 14px; color: #386b64; } #demo-dialog.is-northstar .na-result strong { font-size: 20px; line-height: 1.4; } #demo-dialog.is-northstar .na-match-table > [role="row"] { display: grid; grid-template-columns: .8fr 1.1fr 1fr 1.05fr; border-bottom: 1px solid #e5eae4; } #demo-dialog.is-northstar .na-match-table > [role="row"]:last-child { border-bottom: 0; } #demo-dialog.is-northstar .na-match-table [role="cell"], #demo-dialog.is-northstar .na-match-table [role="columnheader"] { padding: 12px 8px; color: #2f4148; font-size: 12px; line-height: 1.65; } #demo-dialog.is-northstar .na-match-table .na-match-header { background: #f7f9f4; } #demo-dialog.is-northstar .na-match-table [role="columnheader"] { color: #53666f; font: 10px/1.6 var(--mono, monospace); } #demo-dialog.is-northstar .na-footer > span:first-child { display: flex; align-items: flex-start; gap: 8px; } #demo-dialog.is-northstar .na-footer i { flex: 0 0 5px; width: 5px; height: 5px; margin-top: 6px; border-radius: 50%; background: #409783; } @keyframes na-handoff { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } @container northstar-workspace (max-width: 1100px) { #demo-dialog.is-northstar .na-split { grid-template-columns: 1fr; } #demo-dialog.is-northstar .na-coordination { grid-template-columns: 1fr; } #demo-dialog.is-northstar .na-agent-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; } #demo-dialog.is-northstar .na-agent-detail > :is(small, h4, p) { grid-column: 1; } #demo-dialog.is-northstar .na-agent-detail > .na-detail-output { grid-column: 2; grid-row: 1 / 4; margin: 0; align-self: start; } #demo-dialog.is-northstar .na-agent-detail .na-detail-boundary { grid-column: 1 / -1; } #demo-dialog.is-northstar .na-agent-detail .na-team-context { grid-column: 1 / -1; } #demo-dialog.is-northstar .na-network { max-height: 450px; } #demo-dialog.is-northstar .na-screen-heading { display: block; } #demo-dialog.is-northstar .na-screen-heading h3 { margin-right: 0; } #demo-dialog.is-northstar .na-screen-heading > .na-badge { position: static; margin-top: 13px; } #demo-dialog.is-northstar .na-result-grid { gap: 12px; } #demo-dialog.is-northstar .na-result { padding: 17px; } #demo-dialog.is-northstar .na-result strong { font-size: 18px; } } @container northstar-workspace (max-width: 900px) { #demo-dialog.is-northstar .na-layout { grid-template-columns: 1fr; } #demo-dialog.is-northstar .na-rail { display: block; border-right: 0; border-bottom: 1px solid #dce3dd; padding: 11px 14px; } #demo-dialog.is-northstar .na-rail nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } #demo-dialog.is-northstar .na-rail button { align-items: flex-start; padding: 11px 10px; gap: 7px; font-size: 12px; } #demo-dialog.is-northstar .na-nav-number { flex-basis: 17px; } #demo-dialog.is-northstar .na-rail-note { display: none; } #demo-dialog.is-northstar .na-main { padding: 24px 20px; } #demo-dialog.is-northstar .na-action-row { align-items: flex-start; } #demo-dialog.is-northstar .na-action-row .na-action { max-width: 47%; flex-shrink: 1; } #demo-dialog.is-northstar .na-workflow-track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; } #demo-dialog.is-northstar .na-workflow-track > li { font-size: 12px; } } @media (max-width: 640px) { #demo-dialog.is-northstar { width: calc(100% - 16px); max-height: calc(100dvh - 16px); padding: 14px; } #demo-dialog.is-northstar #demo-title { margin-top: 5px; margin-right: 52px; font-size: 24px; } #demo-dialog.is-northstar #demo-description { margin-right: 0; font-size: 14px; line-height: 1.7; } #demo-dialog.is-northstar .demo-disclosure { font-size: 10px; letter-spacing: .025em; } #demo-dialog.is-northstar #demo-step-label { font-size: 10px; letter-spacing: .025em; } } @container northstar-workspace (max-width: 640px) { #demo-dialog.is-northstar .na-topbar { padding: 17px; gap: 12px; align-items: flex-start; } #demo-dialog.is-northstar .na-brand { gap: 8px; } #demo-dialog.is-northstar .na-brand-name strong { font-size: 19px; } #demo-dialog.is-northstar .na-brand-name small { font-size: 10px; } #demo-dialog.is-northstar .na-brand > svg { width: 26px; height: 26px; flex-basis: 26px; } #demo-dialog.is-northstar .na-top-meta { max-width: 43%; display: block; font-size: 10px; line-height: 1.7; text-align: right; } #demo-dialog.is-northstar .na-top-meta .na-badge { margin-top: 6px; font-size: 10px; } #demo-dialog.is-northstar .na-rail { padding: 10px 12px; } #demo-dialog.is-northstar .na-rail nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } #demo-dialog.is-northstar .na-rail button { min-height: 48px; font-size: 13px; padding: 12px 10px; } #demo-dialog.is-northstar .na-main { padding: 22px 16px; } #demo-dialog.is-northstar .na-screen-heading h3 { font-size: 25px; } #demo-dialog.is-northstar .na-screen-heading p { font-size: 14px; line-height: 1.7; } #demo-dialog.is-northstar .na-case-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 0; padding-block: 18px; } #demo-dialog.is-northstar .na-meta { padding: 0 12px; } #demo-dialog.is-northstar .na-meta:nth-child(odd) { padding-left: 0; border-left: 0; } #demo-dialog.is-northstar .na-meta strong { font-size: 14px; } #demo-dialog.is-northstar .na-panel-head { padding: 15px 17px; display: block; } #demo-dialog.is-northstar .na-panel-head > .na-badge { margin-top: 9px; } #demo-dialog.is-northstar .na-panel-head h4 { font-size: 15px; } #demo-dialog.is-northstar .na-panel-body { padding: 18px; } #demo-dialog.is-northstar .na-panel-body > p { font-size: 14px; } #demo-dialog.is-northstar .na-reference-compare { grid-template-columns: 1fr; gap: 12px; } #demo-dialog.is-northstar .na-reference { padding: 16px; } #demo-dialog.is-northstar .na-reference code { font-size: 18px; } #demo-dialog.is-northstar .na-reference p { font-size: 14px; } #demo-dialog.is-northstar .na-facts > div { grid-template-columns: minmax(76px, .7fr) minmax(0, 1.3fr); gap: 12px; } #demo-dialog.is-northstar .na-facts dt { font-size: 13px; } #demo-dialog.is-northstar .na-facts dd { font-size: 14px; } #demo-dialog.is-northstar .na-callout, #demo-dialog.is-northstar .na-callout strong { font-size: 14px; } #demo-dialog.is-northstar .na-trace strong { font-size: 14px; } #demo-dialog.is-northstar .na-trace small { font-size: 13px; } #demo-dialog.is-northstar .na-action-row { display: block; padding-top: 20px; } #demo-dialog.is-northstar .na-action-row > p { font-size: 14px; } #demo-dialog.is-northstar .na-action-row > p :is(strong, span) { font-size: 14px; } #demo-dialog.is-northstar .na-action-row > :is(.na-action, .na-secondary) { max-width: none; width: 100%; margin-top: 16px; } #demo-dialog.is-northstar .na-network { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; width: 100%; max-height: none; aspect-ratio: auto; padding: 19px 16px; background: #f7f8f4; } #demo-dialog.is-northstar .na-network > .na-wires { display: none; } #demo-dialog.is-northstar .na-agent { position: static; width: 100%; min-height: 143px; padding: 15px 13px; transform: none; } #demo-dialog.is-northstar .na-agent > svg { position: static; width: 20px; height: 20px; margin-bottom: 11px; } #demo-dialog.is-northstar .na-agent strong { margin-top: 7px; font-size: 14px; } #demo-dialog.is-northstar .na-agent > span { margin-top: 8px; font-size: 11px; } #demo-dialog.is-northstar .na-core { position: static; grid-column: 1 / -1; order: -1; flex-direction: row; gap: 10px; width: 100%; max-width: none; min-height: 70px; padding: 14px; border-radius: 5px; transform: none; box-shadow: none; text-align: left; } #demo-dialog.is-northstar .na-core strong { font-size: 14px; } #demo-dialog.is-northstar .na-core small { max-width: 100px; margin-left: auto; text-align: right; } #demo-dialog.is-northstar .na-agent-detail { display: block; padding: 20px; } #demo-dialog.is-northstar .na-agent-detail h4 { font-size: 23px; } #demo-dialog.is-northstar .na-agent-detail > p { font-size: 14px; } #demo-dialog.is-northstar .na-agent-detail > .na-detail-output { margin-top: 21px; } #demo-dialog.is-northstar .na-detail-output strong { font-size: 14px; } #demo-dialog.is-northstar .na-detail-boundary { font-size: 13px; } #demo-dialog.is-northstar .na-agent-detail .na-team-context { font-size: 13px; } #demo-dialog.is-northstar .na-motion-controls { padding-inline: 16px; } #demo-dialog.is-northstar .na-motion-controls > button { flex: 1; font-size: 13px; } #demo-dialog.is-northstar .na-motion-controls > span { flex-basis: 100%; text-align: left; margin: 6px 0 0; } #demo-dialog.is-northstar .na-workflow-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } #demo-dialog.is-northstar .na-workflow-track > li { padding-inline: 5px; font-size: 12px; } #demo-dialog.is-northstar .na-motion-summary { font-size: 14px; } #demo-dialog.is-northstar .na-change-line { gap: 13px; } #demo-dialog.is-northstar .na-change-line > div code { font-size: 13px; } #demo-dialog.is-northstar .na-review-checks > span { font-size: 14px; } #demo-dialog.is-northstar .na-review-person strong { font-size: 15px; } #demo-dialog.is-northstar .na-review-person small { font-size: 13px; } #demo-dialog.is-northstar .na-review-decision { margin: 20px -18px -18px; padding: 18px; } #demo-dialog.is-northstar .na-review-decision > small { font-size: 12px; } #demo-dialog.is-northstar .na-outcome-banner { flex-wrap: wrap; padding: 19px; gap: 12px; } #demo-dialog.is-northstar .na-outcome-banner > div { flex-basis: calc(100% - 38px); } #demo-dialog.is-northstar .na-outcome-banner h4 { font-size: 23px; } #demo-dialog.is-northstar .na-outcome-banner p { font-size: 14px; } #demo-dialog.is-northstar .na-outcome-banner > .na-badge { margin-left: 38px; } #demo-dialog.is-northstar .na-result-grid { grid-template-columns: 1fr; } #demo-dialog.is-northstar .na-result { padding: 19px; } #demo-dialog.is-northstar .na-result strong { font-size: 24px; } #demo-dialog.is-northstar .na-result > span { font-size: 14px; } #demo-dialog.is-northstar .na-match-table > .na-match-header { display: none; } #demo-dialog.is-northstar .na-match-table > [role="row"]:not(.na-match-header) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-bottom: 13px; padding: 16px; border: 1px solid #dfe6df; border-radius: 5px; } #demo-dialog.is-northstar .na-match-table [role="cell"] { padding: 0; font-size: 13px; } #demo-dialog.is-northstar .na-match-table [role="cell"]::before { content: attr(data-label); display: block; margin-bottom: 5px; font: 10px/1.6 var(--mono, monospace); color: #53666f; } #demo-dialog.is-northstar .na-reconciled-note { font-size: 14px; } #demo-dialog.is-northstar .na-footer { display: block; padding: 15px 18px; font-size: 10px; } #demo-dialog.is-northstar .na-footer > span + span { display: block; margin-top: 7px; } } @container northstar-workspace (max-width: 380px) { #demo-dialog.is-northstar .na-topbar { flex-wrap: wrap; gap: 13px; } #demo-dialog.is-northstar .na-top-meta { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: none; text-align: left; } #demo-dialog.is-northstar .na-top-meta .na-badge { margin: 0; } #demo-dialog.is-northstar .na-main { padding-inline: 13px; } #demo-dialog.is-northstar .na-network { grid-template-columns: 1fr; padding: 18px 14px; } #demo-dialog.is-northstar .na-agent { min-height: 125px; padding: 16px; } #demo-dialog.is-northstar .na-agent > svg { position: absolute; right: 16px; top: 17px; } #demo-dialog.is-northstar .na-agent { position: relative; inset: auto; } #demo-dialog.is-northstar .na-agent strong { padding-right: 20px; } #demo-dialog.is-northstar .na-core { flex-wrap: wrap; } #demo-dialog.is-northstar .na-core small { max-width: none; flex-basis: 100%; margin-left: 0; text-align: center; } #demo-dialog.is-northstar .na-change-line { grid-template-columns: 1fr; } #demo-dialog.is-northstar .na-change-line > span { transform: rotate(90deg); width: 20px; } #demo-dialog.is-northstar .na-facts > div { grid-template-columns: 1fr; gap: 5px; } #demo-dialog.is-northstar .na-match-table > [role="row"]:not(.na-match-header) { padding: 13px; } } @media (prefers-reduced-motion: reduce) { #demo-dialog.is-northstar *, #demo-dialog.is-northstar *::before, #demo-dialog.is-northstar *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } html[data-motion="reduced"] #demo-dialog.is-northstar *, html[data-motion="reduced"] #demo-dialog.is-northstar *::before, html[data-motion="reduced"] #demo-dialog.is-northstar *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Stable heading and peer-column alignment. */ #demo-dialog.is-northstar .na-screen-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } #demo-dialog.is-northstar .na-screen-heading > div { flex: 1; } #demo-dialog.is-northstar .na-screen-heading h3 { margin-right: 0; } #demo-dialog.is-northstar .na-screen-heading > .na-badge { position: static; flex: 0 0 auto; max-width: 190px; margin-top: 3px; } #demo-dialog.is-northstar .na-split > .na-panel + .na-panel { margin-top: 0; } @container northstar-workspace (max-width: 1100px) { #demo-dialog.is-northstar .na-screen-heading { display: block; } #demo-dialog.is-northstar .na-screen-heading > .na-badge { max-width: 100%; margin-top: 13px; } } /* Homepage entry: the same payment case, presented clearly at card size. */ .demos .compact-demo.northstar-demo-card .na-thumb { container: northstar-thumbnail / inline-size; display: flex; flex-direction: column; justify-content: center; gap: 23px; min-height: 285px; height: auto; padding: 25px 22px; border-right: 1px solid #dce3de; background: linear-gradient(145deg, #eef3ee, #faf9f4 75%); color: #2f4148; } .northstar-demo-card .na-thumb-brand { display: block; font: 600 11px/1.6 var(--mono, monospace); letter-spacing: .04em; color: #326c60; } .northstar-demo-card .na-thumb-amount small { display: block; color: #53666f; font: 10px/1.6 var(--mono, monospace); letter-spacing: .03em; } .northstar-demo-card .na-thumb-amount strong { display: block; margin-top: 6px; color: #2f4148; font-size: 39px; font-weight: 550; letter-spacing: -.055em; line-height: 1.15; font-variant-numeric: tabular-nums; } .northstar-demo-card .na-thumb-route { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding-block: 16px; border-block: 1px solid #d8e2db; } .northstar-demo-card .na-thumb-route > span { display: inline-flex; align-items: center; padding: 5px 7px; border: 1px solid #ceded3; border-radius: 3px; background: #f9fcf8; color: #416a58; font-size: 11px; line-height: 1.6; } .northstar-demo-card .na-thumb-status { display: block; color: #53666f; font-size: 12px; line-height: 1.65; } @container northstar-thumbnail (max-width: 175px) { .northstar-demo-card .na-thumb-amount strong { font-size: 31px; } .northstar-demo-card .na-thumb-route { gap: 7px 5px; } } @media (max-width: 700px) { .demos .compact-demo.northstar-demo-card { grid-template-columns: 1fr; } .demos .compact-demo.northstar-demo-card .na-thumb { min-height: 0; padding: 25px; gap: 20px; border-right: 0; border-bottom: 1px solid #dce3de; } .northstar-demo-card .na-thumb-brand { font-size: 11px; } .northstar-demo-card .na-thumb-amount strong { font-size: 43px; } .northstar-demo-card .na-thumb-route { padding-block: 14px; } .northstar-demo-card .na-thumb-route > span { padding: 6px 12px; font-size: 12px; } .northstar-demo-card .na-thumb-status { font-size: 13px; } .demos .northstar-demo-card .demo-card-copy { padding: 24px; } .demos .northstar-demo-card .demo-card-copy h3 { font-size: 26px; max-width: 360px; } .demos .northstar-demo-card .demo-card-copy p { font-size: 14px; line-height: 1.7; } .demos .northstar-demo-card .demo-card-copy > b { font-size: 10px; } }