/* Case study: a 20 second loop. One sentence builds an invoice exception tracker in ERP•AI on a draft
   branch; the user checks it and approves the release. Sizes inside the canvas are design pixels; the
   canvas scales to its stage. Window coordinates match the camera shots in proto-case.js. */
.k-case-capture { padding: 20px; }
.k-case-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; contain: layout paint; --c-stage: #ecdfd2; background: var(--c-stage); }
.k-case:not([data-c-ready]) .k-c-canvas { visibility: hidden; }
/* Keep a real visual until mounting has rendered successfully, including failed or blocked JS. */
.k-case-fallback { position: absolute; inset: 0; display: block; }
.k-case-fallback img { display: block; width: 100%; height: 100%; object-fit: contain; }
.k-case[data-c-ready] .k-case-fallback { display: none; }
.k-case-foot { display: flex; align-items: center; gap: 16px; margin-top: 16px; font-size: 12px; }
.k-case-note { color: #7b6657; }
.k-case-toggle { margin-left: auto; }

.k-c-canvas { position: absolute; left: 0; top: 0; width: 1200px; height: 675px; transform-origin: 0 0; font-family: 'Supreme', sans-serif; font-size: 16px; line-height: 25px; color: #1d1916; font-variant-numeric: tabular-nums; }
:where(.k-c-canvas) :where(p, b, strong, small, ol, li, em) { margin: 0; padding: 0; }
:where(.k-c-canvas) :where(em, i) { font-style: normal; }
.k-c-canvas .k-icon { flex: none; width: 16px; height: 16px; stroke-width: 2; }
.k-c-bg { position: absolute; inset: 0; overflow: hidden; }
.k-c-wipe { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 50%; }
.k-c-world { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-origin: 0 0; }
.k-c-cursor { position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -4.4px 0 0 -8.8px; transform-origin: 8.8px 4.4px; filter: drop-shadow(0 4px 6px rgba(29, 25, 22, .22)); pointer-events: none; }
.k-c-swap { display: inline-grid; }
.k-c-swap > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: inherit; gap: 6px; white-space: nowrap; }
.k-c-spin { flex: none; display: inline-block; width: 14px; height: 14px; box-sizing: border-box; border: 2px solid #e8dfd5; border-top-color: #ff6b32; border-radius: 50%; }
.k-c-spin--light { width: 18px; height: 18px; border-color: rgba(255, 255, 255, .25); border-top-color: #fff; }

/* Window */
.k-c-window { position: absolute; left: -660px; top: -410px; width: 560px; height: 820px; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(29, 25, 22, .08), 0 34px 80px rgba(74, 48, 32, .2), 0 10px 24px rgba(74, 48, 32, .08); }
.k-c-titlebar { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 18px; width: 1320px; height: 44px; padding: 0 18px; box-sizing: border-box; border-bottom: 1px solid #efe8e0; background: #faf7f3; font-size: 14px; font-weight: 600; }
.k-c-lights { display: flex; gap: 8px; }
.k-c-lights i { width: 12px; height: 12px; border-radius: 50%; background: #e3d9ce; }
.k-c-title { display: inline-grid; }
.k-c-title > span { grid-area: 1 / 1; white-space: nowrap; }

/* Chat */
.k-c-chat { position: absolute; left: 0; top: 44px; width: 560px; height: 776px; }
.k-c-bubble { position: absolute; right: 28px; top: 28px; padding: 12px 18px; border-radius: 18px; background: rgba(242, 237, 231, var(--bg, 1)); white-space: nowrap; }
.k-c-bubble--2 { top: 347px; }
.k-c-note { position: absolute; left: 28px; top: 147px; display: flex; align-items: center; gap: 10px; height: 24px; font-size: 14px; color: #6f655c; white-space: nowrap; }
.k-c-note .k-icon { width: 13px; height: 13px; }
.k-c-group { position: absolute; left: 28px; right: 28px; top: 179px; display: flex; align-items: center; gap: 8px; height: 30px; font-size: 14px; color: #6f655c; white-space: nowrap; }
.k-c-group b { color: #1d1916; font-weight: 600; }
.k-c-chev { display: grid; place-items: center; width: 16px; }
.k-c-chev .k-icon { width: 14px; height: 14px; }
.k-c-rows { position: absolute; left: 28px; right: 28px; top: 213px; height: 192px; overflow: hidden; list-style: none; }
.k-c-rows li { display: flex; align-items: center; gap: 10px; height: 32px; padding-left: 24px; font-size: 14px; color: #6f655c; white-space: nowrap; }
.k-c-rows b, .k-c-group--release b { color: #1d1916; font-weight: 550; }
.k-c-rows em, .k-c-group--release em { margin-left: auto; font-size: 13px; }
.k-c-state { display: grid; place-items: center; flex: none; width: 18px; height: 18px; }
.k-c-state > * { grid-area: 1 / 1; }
.k-c-state .k-c-spin { opacity: calc(1 - var(--done, 0)); }
.k-c-tick { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #1d1916; color: #fff; opacity: var(--done, 0); transform: scale(calc(.4 + .6 * var(--pop, 0))); }
.k-c-tick .k-icon { width: 11px; height: 11px; stroke-width: 3; }
.k-c-group--release { top: 409px; }
.k-c-group--release em { justify-content: end; }
.k-c-summary { position: absolute; left: 28px; top: 223px; }
.k-c-summary > span { position: relative; z-index: 0; display: block; width: max-content; }
.k-c-summary b, .k-c-live-note b { font-weight: 650; }
.k-c-hl { position: absolute; z-index: -1; left: -5px; right: -5px; top: 2px; bottom: 1px; border-radius: 5px; background: #ffd0b9; transform: scaleX(var(--k, 0)); transform-origin: 0 50%; }
.k-c-live-note { position: absolute; left: 28px; top: 451px; white-space: nowrap; }

/* Composer */
.k-c-composer { position: absolute; left: 20px; right: 20px; top: 631px; height: 125px; padding: 14px 18px 0; box-sizing: border-box; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, #e3dad0, #1d1916 calc(var(--focus, 0) * 55%)), 0 0 0 calc(var(--focus, 0) * 4px) rgba(255, 107, 50, .16), 0 8px 20px rgba(74, 48, 32, .06); }
.k-c-field { position: relative; height: 75px; }
.k-c-placeholder { position: absolute; left: 0; top: 0; color: #6f655c; }
.k-c-caret { display: inline-block; width: 2px; height: 19px; margin-left: 1px; vertical-align: -4px; border-radius: 1px; background: #ff6b32; }
.k-c-controls { position: absolute; left: 14px; right: 14px; bottom: 5px; display: flex; align-items: center; gap: 14px; height: 32px; font-size: 13px; color: #6f655c; }
.k-c-perm, .k-c-effort { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.k-c-perm .k-icon:last-child, .k-c-effort .k-icon { width: 13px; height: 13px; }
.k-c-plus { display: grid; place-items: center; }
.k-c-effort { margin-left: auto; }
.k-c-send { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, #e4dcd3, #1d1916 calc(var(--active, 0) * 100%)); color: #fff; transform: scale(var(--press, 1)); }
.k-c-send .k-icon { stroke-width: 2.4; }

/* App pane: header, tabs and views */
.k-c-app { position: absolute; left: 560px; top: 44px; width: 760px; height: 776px; overflow: hidden; border-left: 1px solid #efe8e0; background: #fcfaf7; }
.k-c-app-head > * { position: absolute; }
.k-c-app-icon { left: 24px; top: 14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #ff6b32; color: #1d1916; }
.k-c-app-icon .k-icon { width: 19px; height: 19px; }
.k-c-app-name { left: 72px; top: 12px; font-size: 12px; line-height: 16px; color: #6f655c; white-space: nowrap; }
.k-c-app-name strong { display: block; font-size: 19px; line-height: 24px; font-weight: 650; letter-spacing: -.01em; color: #1d1916; }
.k-c-branch { left: 268px; top: 18px; width: 222px; height: 28px; overflow: hidden; border-radius: 14px; background: color-mix(in srgb, #f1eae2, #1d1916 calc(var(--live, 0) * 100%)); font-size: 13px; line-height: 28px; transform-origin: 0 50%; }
.k-c-branch > span { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; white-space: nowrap; }
.k-c-branch .k-icon { width: 14px; height: 14px; }
.k-c-branch-draft { color: #5b4f47; opacity: calc(1 - var(--live, 0)); }
.k-c-branch-live { color: #fff; font-weight: 600; opacity: var(--live, 0); }
.k-c-branch-live i { width: 8px; height: 8px; border-radius: 50%; background: #ff6b32; }
.k-c-sample { left: 500px; top: 18px; height: 28px; padding: 0 12px; border-radius: 14px; box-shadow: inset 0 0 0 1px #e3d9ce; font-size: 13px; line-height: 28px; color: #6f655c; white-space: nowrap; }
.k-c-team { right: 24px; top: 16px; display: flex; align-items: center; height: 32px; font-size: 13px; color: #5b4f47; }
.k-c-team .k-c-av { width: 28px; height: 28px; margin-left: -4px; box-shadow: 0 0 0 2px #fcfaf7; font-size: 10.5px; }
.k-c-team .k-c-av:first-child { margin-left: 0; }
.k-c-team span { margin-left: 10px; white-space: nowrap; }
.k-c-av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 10.5px; font-weight: 650; line-height: 1; color: #fff; }
.k-c-av.is-1 { background: #ff6b32; color: #1d1916; }
.k-c-av.is-2 { background: #1d1916; }
.k-c-av.is-3 { background: #a47c5f; color: #1d1916; }
.k-c-av.is-4 { background: #6e5a4b; }
.k-c-tabs { position: absolute; left: 24px; top: 64px; width: 712px; height: 38px; }
.k-c-tab { position: absolute; top: 0; display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; font-size: 14px; font-weight: 550; white-space: nowrap; color: color-mix(in srgb, #6f655c, #1d1916 calc(var(--on, 0) * 100%)); scale: var(--press, 1); }
.k-c-tab:nth-child(1) { left: 0; width: 124px; }
.k-c-tab:nth-child(2) { left: 132px; width: 132px; }
.k-c-tab:nth-child(3) { left: 272px; width: 156px; }
.k-c-tab b { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: #ff6b32; color: #1d1916; font-size: 11px; font-weight: 700; }
.k-c-tab-line { position: absolute; left: 0; top: 36px; width: 124px; height: 2px; border-radius: 1px; background: #1d1916; transform-origin: 0 0; }
.k-c-rule { position: absolute; left: 0; right: 0; top: 102px; height: 1px; background: #efe8e0; }
.k-c-view { position: absolute; left: 24px; top: 126px; width: 712px; height: 626px; }

/* All exceptions: columns arrive one by one, then the sample records fill in */
.k-c-grid-head, .k-c-grid-row { display: grid; grid-template-columns: 176px 92px 84px 140px 64px 156px; }
.k-c-grid-head { height: 34px; border-bottom: 1px solid #e9e1d8; font-size: 12px; font-weight: 600; color: #6f655c; }
.k-c-grid-row { height: 44px; border-bottom: 1px solid #f1ebe4; font-size: 13.5px; line-height: 18px; }
:is(.k-c-grid-head, .k-c-grid-row) > span { position: relative; display: flex; align-items: center; height: 100%; padding: 0 10px; box-sizing: border-box; white-space: nowrap; opacity: var(--col, 0); translate: calc((1 - var(--col, 0)) * 18px) 0; }
:is(.k-c-grid-head, .k-c-grid-row) > span:nth-child(1) { --col: var(--c1, 0); }
:is(.k-c-grid-head, .k-c-grid-row) > span:nth-child(2) { --col: var(--c2, 0); justify-content: flex-end; }
:is(.k-c-grid-head, .k-c-grid-row) > span:nth-child(3) { --col: var(--c3, 0); }
:is(.k-c-grid-head, .k-c-grid-row) > span:nth-child(4) { --col: var(--c4, 0); }
:is(.k-c-grid-head, .k-c-grid-row) > span:nth-child(5) { --col: var(--c5, 0); }
:is(.k-c-grid-head, .k-c-grid-row) > span:nth-child(6) { --col: var(--c6, 0); }
.k-c-skel { position: absolute; left: 10px; top: 50%; width: 58%; height: 10px; margin-top: -5px; border-radius: 5px; background: #eee6dd; opacity: calc(var(--skel, 0) * (1 - var(--fill, 0))); }
.k-c-grid-row > span:nth-child(2) .k-c-skel { left: auto; right: 10px; width: 50%; }
.k-c-val { display: block; opacity: var(--fill, 0); translate: 0 calc((1 - var(--fill, 0)) * 6px); }
.k-c-val b { display: block; font-weight: 600; }
.k-c-val small { display: block; font-size: 11.5px; line-height: 15px; color: #6f655c; }
.k-c-age { display: inline-block; padding: 0 8px; border-radius: 10px; font-size: 12px; font-weight: 650; line-height: 20px; scale: calc(.5 + .5 * var(--chip, 0)); }
.k-c-age.is-1 { background: #f1ebe4; color: #5b4f47; }
.k-c-age.is-2 { background: #fde4d6; color: #a8481c; }
.k-c-age.is-3 { background: #ffc6a8; color: #8f3510; }
.k-c-age.is-4 { background: #ff6b32; color: #1d1916; }
.k-c-reason { display: inline-block; padding: 0 8px; border-radius: 10px; box-shadow: inset 0 0 0 1px #e3d9ce; font-size: 12px; line-height: 20px; color: #5b4f47; }
.k-c-grid-row .k-c-av { scale: calc(.4 + .6 * var(--chip, 0)); }
.k-c-grid-foot { margin-top: 12px; font-size: 13px; color: #6f655c; }
.k-c-grid-foot b { font-weight: 600; color: #1d1916; }

/* Aging dashboard */
.k-c-kpis { display: grid; grid-template-columns: 224px 224px 240px; gap: 12px; }
.k-c-kpis p { display: flex; flex-direction: column; justify-content: space-between; height: 90px; padding: 14px 16px; box-sizing: border-box; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #ece4db; }
.k-c-kpis p > span { font-size: 12.5px; line-height: 16px; color: #6f655c; }
.k-c-kpis b { display: flex; font-size: 30px; line-height: 34px; font-weight: 650; letter-spacing: -.02em; }
.k-c-kpis .is-alert b { color: #e2561d; }
.k-c-odo { display: inline-block; height: 34px; overflow: hidden; }
.k-c-odo-strip { display: flex; flex-direction: column; }
.k-c-odo-strip i { display: block; height: 34px; line-height: 34px; text-align: center; }
.k-c-chart-title { margin-top: 24px; font-size: 13px; font-weight: 600; color: #5b4f47; }
.k-c-bars { display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; height: 250px; margin-top: 8px; }
.k-c-bars p { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.k-c-bars span { display: flex; flex-direction: column; align-items: center; font-size: 12px; line-height: 16px; color: #6f655c; opacity: var(--label, 0); translate: 0 calc((1 - var(--label, 0)) * 6px); }
.k-c-bars span b { font-size: 15px; line-height: 20px; font-weight: 650; color: #1d1916; }
.k-c-bars i { width: 88px; height: calc(var(--v) * var(--grow, 0) * 170px); border-radius: 10px 10px 3px 3px; background: #1d1916; }
.k-c-bars p:last-child i { background: #ff6b32; }
.k-c-bars small { font-size: 12px; line-height: 16px; color: #6f655c; }

/* Needs approval */
.k-c-item { position: absolute; left: 0; display: grid; grid-template-columns: 1fr 100px 88px 92px; gap: 12px; align-items: center; width: 712px; height: 76px; padding: 0 16px; box-sizing: border-box; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #ece4db, 0 4px 10px rgba(74, 48, 32, .04); }
.k-c-item:nth-child(1) { top: 0; }
.k-c-item:nth-child(2) { top: 88px; }
.k-c-item:nth-child(3) { top: 176px; }
.k-c-item p { font-size: 14.5px; line-height: 20px; white-space: nowrap; }
.k-c-item p b { font-weight: 600; }
.k-c-item p span { margin-left: 8px; font-size: 12px; color: #6f655c; }
.k-c-item small { display: block; font-size: 12.5px; line-height: 18px; color: #6f655c; }
.k-c-item strong { font-size: 15px; font-weight: 650; text-align: right; }
.k-c-btn { display: grid; place-items: center; height: 34px; border-radius: 17px; box-shadow: inset 0 0 0 1px #ddd3c8; font-size: 13px; font-weight: 600; white-space: nowrap; }
.k-c-btn.is-primary { background: #1d1916; color: #fff; box-shadow: none; }
.k-c-btn .k-icon { width: 14px; height: 14px; stroke-width: 2.6; }
.k-c-btn[data-c-approve], .k-c-btn.k-c-release-btn { background: color-mix(in srgb, #1d1916, #b84f25 calc(var(--done, 0) * 100%)); transform: scale(var(--press, 1)); }

/* Release panel and toast */
.k-c-panel { position: absolute; left: 340px; top: 0; width: 420px; height: 776px; background: #fff; box-shadow: -1px 0 0 #ece4db, -24px 0 48px rgba(74, 48, 32, .12); }
.k-c-panel > * { position: absolute; left: 24px; right: 24px; }
.k-c-panel-head { top: 24px; display: flex; align-items: center; justify-content: space-between; height: 28px; }
.k-c-panel-head strong { font-size: 18px; font-weight: 650; }
.k-c-panel-head .k-icon { color: #6f655c; }
.k-c-panel-branch { top: 68px; display: flex; align-items: center; gap: 8px; height: 26px; font-size: 13px; color: #5b4f47; white-space: nowrap; }
.k-c-panel-branch > span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; background: #f3ede6; }
.k-c-panel-branch .k-icon { width: 14px; height: 14px; }
.k-c-panel-label { top: 112px; font-size: 11px; font-weight: 650; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: #6f655c; }
.k-c-change { padding: 11px 14px; box-sizing: border-box; border-radius: 12px; background: #faf7f3; box-shadow: 0 0 0 1px #efe8e0; }
.k-c-change--1 { top: 134px; height: 60px; }
.k-c-change--2 { top: 202px; height: 78px; }
.k-c-change--3 { top: 288px; height: 60px; }
.k-c-change p { display: flex; align-items: center; justify-content: space-between; font-size: 14px; line-height: 18px; }
.k-c-change strong { font-weight: 650; }
.k-c-change em { padding: 0 8px; border-radius: 9px; background: #1d1916; color: #fff; font-size: 11.5px; font-weight: 650; line-height: 18px; }
.k-c-change > span { display: block; margin-top: 4px; font-size: 13px; line-height: 18px; color: #6f655c; }
.k-c-conflicts { top: 368px; display: flex; align-items: center; gap: 8px; height: 24px; font-size: 13px; color: #5b4f47; }
.k-c-actions { top: 418px; height: 40px; }
.k-c-actions .k-c-btn { position: absolute; top: 0; height: 40px; border-radius: 20px; }
.k-c-actions .k-c-btn:first-child { left: 116px; width: 88px; }
.k-c-actions .k-c-release-btn { left: 216px; width: 156px; font-size: 14px; }
.k-c-toast { position: absolute; left: 200px; bottom: 60px; display: flex; align-items: center; gap: 12px; width: 360px; height: 60px; padding: 0 16px; box-sizing: border-box; border-radius: 16px; background: #1d1916; color: #cbbfb3; font-size: 13px; line-height: 18px; box-shadow: 0 16px 36px rgba(29, 25, 22, .25); }
.k-c-toast > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #ff6b32; color: #1d1916; }
.k-c-toast span { display: flex; flex-direction: column; }
.k-c-toast b { font-size: 14px; font-weight: 650; color: #fff; }

/* The three steps under the stage follow the loop */
.k-case-outcomes p { position: relative; padding-top: 20px; transition: opacity .3s ease; }
.k-case-outcomes p::before, .k-case-outcomes p::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 1px; background: #d9c7b7; }
.k-case-outcomes p::after { background: var(--proto-orange); transform: scaleX(var(--k, 0)); transform-origin: 0 50%; }
.k-case[data-step] .k-case-outcomes p { opacity: .5; }
.k-case[data-step="1"] .k-case-outcomes p:nth-child(1), .k-case[data-step="2"] .k-case-outcomes p:nth-child(2), .k-case[data-step="3"] .k-case-outcomes p:nth-child(3), .k-case[data-c-static] .k-case-outcomes p { opacity: 1; }
.k-case[data-c-static] .k-case-outcomes p::after { display: none; }

@media (max-width: 700px) {
  .k-case-capture { padding: 10px; }
  .k-case-stage { aspect-ratio: 4 / 5; border-radius: 8px; }
  .k-case-foot { margin-top: 12px; font-size: 11px; }
}

html.dark .k-case-stage { --c-stage: #3b3029; }
html.dark .k-case-note { color: var(--k-muted); }
html.dark .k-case-outcomes p::before { background: var(--k-line); }