/* Demo kit: shared building blocks for the interactive demos at /demos/*. Loads after brand.css.
   Class prefix dk-. Each demo adds its own css/demos/<slug>.css, scoped to its root (#demo .xx-...). */

/* page parts */
.dk-hero .lede{max-width:62ch}
.dk-crumb{margin:0 0 18px;font-size:.95rem}
.dk-crumb a{color:#ffffffc7;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.dk-crumb a::before{content:"";width:.95em;height:.95em;background:currentColor;-webkit-mask:var(--i-arrow) center/contain no-repeat;mask:var(--i-arrow) center/contain no-repeat;transform:scaleX(-1)}
.dk-crumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:.2em}
.dk-facts{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;color:#ffffffc7;font-size:.95rem}
.dk-facts li{display:inline-flex;align-items:center;gap:8px}
.dk-facts .icon{color:var(--orange-lite)}
.dk-sec{background:var(--primer);border-bottom:1px solid var(--line);padding-block:clamp(40px,6vw,76px)}
.dk-h{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:0 0 8px}
.dk-sub{color:var(--ink-2);max-width:66ch;margin:0 0 22px}
.dk-truth .card h3{margin-bottom:6px}
.dk-more{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.dk-more{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dk-more a.card{text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.dk-more a.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-md)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.dk-more a.card:hover{transform:translateY(-2px)}}
.dk-more .card p{margin:0 0 14px}
.dk-more .dk-go{margin-top:auto;font-weight:600;color:var(--link)}

/* honest label above every demo */
.dk-note{display:flex;gap:10px;align-items:flex-start;font-size:.94rem;line-height:1.5;color:var(--ink);background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange-ink);border-radius:var(--r-sm);padding:11px 14px;margin:0 0 18px;max-width:none}
.dk-note b{font-family:var(--head);text-transform:uppercase;letter-spacing:.06em;font-size:1rem;color:var(--orange-ink)}

/* controls row: Play / Step / Reset plus a live status line */
.dk-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 16px}
.dk-bar .btn{min-height:44px;padding:9px 16px;font-size:1rem}
.dk-bar .btn .icon{width:1.05em;height:1.05em}
.dk-status{flex:1 1 220px;margin:0;font-size:.95rem;color:var(--ink-2);min-height:1.5em}
.dk-status b{color:var(--ink)}

/* app window: the same browser chrome as the homepage example card */
.dk-window{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.dk-window-hd{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 14px 6px 72px;border-bottom:1px solid var(--line);font:600 .92rem/1.3 var(--body);color:var(--ink-2);background:radial-gradient(circle at 20px 50%,#D3D9E0 4px,transparent 4.6px),radial-gradient(circle at 35px 50%,#D3D9E0 4px,transparent 4.6px),radial-gradient(circle at 50px 50%,#D3D9E0 4px,transparent 4.6px),linear-gradient(#FAFBFC,#F2F5F8)}
.dk-window-hd b{color:var(--ink);font-weight:600}
.dk-window-hd .dk-tag{margin-left:auto}
.dk-tag{flex:none;display:inline-flex;align-items:center;gap:6px;font:700 .72rem/1 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--orange-ink);background:var(--web-bg);border:1px solid #b8480a33;border-radius:var(--r-pill);padding:4px 10px}

/* phone: the same frame as the after-hours call demo */
.dk-phone{width:100%;max-width:380px;margin-inline:auto;padding:7px;border-radius:34px;background:linear-gradient(#2E5884,#14304D);box-shadow:inset 0 1px 0 #ffffff2e,var(--shadow-lg)}
.dk-screen{border-radius:28px;overflow:hidden;background:linear-gradient(#F1F4F8,#E5EBF1);min-height:420px;display:flex;flex-direction:column}
.dk-screen-hd{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border-bottom:1px solid var(--line)}
.dk-screen-hd b{display:block;font:700 1rem/1.15 var(--head);text-transform:uppercase;letter-spacing:.03em;color:var(--navy)}
.dk-screen-hd small{display:block;font-size:.8rem;color:var(--muted)}
.dk-av{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--navy);font:700 .9rem/1 var(--head)}

/* layouts */
.dk-split{display:grid;grid-template-columns:minmax(0,1fr)}
.dk-split>*{min-width:0}
@media(min-width:860px){.dk-split{grid-template-columns:minmax(0,330px) minmax(0,1fr)}.dk-split>:first-child{border-right:1px solid var(--line)}}
@media(max-width:859px){.dk-split>:first-child{border-bottom:1px solid var(--line)}}
.dk-pane{padding:18px}
.dk-pane-h{margin:0 0 12px;font:700 .82rem/1.3 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dk-cols{display:grid;gap:22px;grid-template-columns:minmax(0,1fr);align-items:start}
.dk-cols>*{min-width:0}
@media(min-width:900px){.dk-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* list rows (buttons) with a selected state */
.dk-list{list-style:none;margin:0;padding:0}
.dk-row{display:grid;gap:3px;width:100%;text-align:left;padding:12px 14px;border:0;border-bottom:1px solid var(--line);border-left:3px solid transparent;background:#fff;color:var(--ink);font:400 .94rem/1.4 var(--body);cursor:pointer;transition:background-color .15s,border-color .15s}
.dk-row:hover{background:#F8FAFC}
.dk-row[aria-pressed="true"],.dk-row[aria-current="true"]{background:#FFF7F1;border-left-color:var(--orange)}
.dk-row b{font-weight:600}
.dk-row small{color:var(--muted);font-size:.84rem}

/* chips */
.dk-chip{display:inline-flex;align-items:center;gap:5px;width:fit-content;font:700 .72rem/1.2 var(--head);letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:var(--r-pill);border:1px solid currentColor;white-space:nowrap}
.dk-chip .icon{width:12px;height:12px}
.dk-chip--ok{color:var(--ok);background:var(--ok-bg);border-color:#1b6e3538}
.dk-chip--warn{color:var(--warn);background:var(--warn-bg);border-color:#8a5a0038}
.dk-chip--bad{color:var(--bad);background:var(--bad-bg);border-color:#b3261e33}
.dk-chip--info{color:var(--cloud);background:var(--cloud-bg);border-color:#1f6fb233}
.dk-chip--ai{color:var(--ai);background:var(--ai-bg);border-color:#1c3a5b29}
.dk-chip--mute{color:var(--muted);background:#F1F4F7;border-color:var(--line)}
.dk-chips{display:flex;flex-wrap:wrap;gap:6px}

/* AI draft box: always marked, always waiting for a person */
.dk-ai{border:1px solid #1c3a5b29;border-radius:var(--r-md,14px);background:linear-gradient(#F4F7FB,#fff 60%);padding:14px 16px}
.dk-ai-hd{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:700 .8rem/1.2 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--ai)}
.dk-ai-hd .icon{width:16px;height:16px;color:var(--orange)}
.dk-ai-hd span{margin-left:auto;font:500 .8rem/1.2 var(--body);letter-spacing:0;text-transform:none;color:var(--muted)}
.dk-ai p{margin:0 0 8px}
.dk-ai textarea{width:100%;min-height:96px;padding:10px 12px;border:1px solid var(--field);border-radius:var(--r-sm);font:400 .95rem/1.5 var(--body);color:var(--ink);background:#fff;resize:vertical}
.dk-ai textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 1px var(--navy),0 0 0 5px #3f8fd240}

/* key/value fields pulled out of a message or document */
.dk-fields{display:grid;grid-template-columns:minmax(84px,auto) minmax(0,1fr);gap:6px 14px;margin:0;font-size:.94rem}
.dk-fields dt{font:700 .74rem/1.9 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dk-fields dd{margin:0;overflow-wrap:anywhere}
.dk-fields .dk-low{background:var(--warn-bg);border-radius:4px;padding:0 4px;box-shadow:inset 0 -2px 0 #8a5a0055}

/* approve row and sent stamp */
.dk-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.dk-actions .btn{min-height:44px;padding:9px 16px;font-size:1rem}
.dk-done{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-weight:600;color:var(--ok)}
.dk-done .icon{width:18px;height:18px}

/* stage indicator (Look, Plan, Move, Check …) */
.dk-steps{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;counter-reset:dks}
.dk-steps li{counter-increment:dks;display:flex;align-items:center;gap:8px;min-width:0;padding:8px 10px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line);font:600 .9rem/1.2 var(--body);color:var(--muted)}
.dk-steps li::before{content:counter(dks);flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#EEF2F6;color:var(--muted);font:700 .8rem/1 var(--head)}
.dk-steps li[data-state="now"]{color:var(--ink);border-color:var(--orange);box-shadow:0 0 0 3px #f26b1d1f}
.dk-steps li[data-state="now"]::before{background:var(--orange);color:#fff}
.dk-steps li[data-state="done"]{color:var(--ink)}
.dk-steps li[data-state="done"]::before{content:"";background:var(--ok) var(--i-check-white) center/14px no-repeat}
@media(max-width:600px){.dk-steps{grid-auto-flow:row;grid-template-columns:1fr 1fr}}

/* event log */
.dk-log{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.92rem}
.dk-log li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:baseline}
.dk-log time{font:600 .82rem/1.4 var(--body);color:var(--muted);font-variant-numeric:tabular-nums}

/* progress meter */
.dk-meter{height:8px;border-radius:999px;background:#E6EBF0;overflow:hidden}
.dk-meter>span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#F78D4C,#F26B1D);transition:width .5s var(--ease)}
.dk-meter--ok>span{background:linear-gradient(90deg,#2E9455,#1B6E35)}

/* thinking: shimmer lines and typing dots */
.dk-skel{display:grid;gap:8px}
.dk-skel i{display:block;height:10px;border-radius:6px;background:linear-gradient(90deg,#E6EBF0 0,#F4F6F9 40%,#E6EBF0 80%) 0 0/200% 100%;animation:dk-sh 1.2s linear infinite}
.dk-skel i:nth-child(2){width:86%}.dk-skel i:nth-child(3){width:64%}
@keyframes dk-sh{to{background-position:-200% 0}}
.dk-dots{display:inline-flex;gap:4px;align-items:center}
.dk-dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35;animation:dk-dot 1s infinite}
.dk-dots i:nth-child(2){animation-delay:.15s}.dk-dots i:nth-child(3){animation-delay:.3s}
@keyframes dk-dot{40%{opacity:1;transform:translateY(-2px)}}

/* new item arrives */
.dk-in{animation:dk-in .45s var(--ease) both}
@keyframes dk-in{from{opacity:0;transform:translateY(6px)}}
.dk-flash{animation:dk-flash 1.2s ease-out}
@keyframes dk-flash{from{background-color:#FFF1E7}}

/* progressive enhancement: static content until the script takes over */
/* root element has class "dk"; DK.start() adds "dk-on". Live parts keep their own display value. */
.dk:not(.dk-on) .dk-live{display:none}
.dk.dk-on .dk-static{display:none}
.dk-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.dk-static .dk-window,.dk-static .card{margin-bottom:16px}

/* focus */
#demo :is(button,a,textarea,input,select,[tabindex]):focus-visible{outline:3px solid var(--navy);outline-offset:3px}
#demo .dk-row:focus-visible{outline-offset:-3px}

@media(prefers-reduced-motion:reduce){
 .dk-skel i,.dk-dots i,.dk-in,.dk-flash{animation:none}
 .dk-meter>span,.dk-row,.dk-more a.card{transition:none}
}
@media print{.dk-bar{display:none}}

/* hub and demo cards */
.dk-card-meta{margin:-2px 0 8px;font:700 .76rem/1.3 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dk-group .cs-head .cs-pill{margin-bottom:14px}
.dk-group .cs-head h2{margin-bottom:8px}
.dk-group .dk-sub{margin-bottom:26px}
/* a group of four on the hub: 2 x 2 on tablets, one row of four on wide screens */
@media(min-width:760px){.dk-more--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.dk-more--4{grid-template-columns:repeat(4,minmax(0,1fr))}}