/* Vesper — product mock-up kit (`mk-`). Load AFTER vesper.css (and palette.css / type.css) on pages that show a product screen.
   The kit is built ON Vesper's own mock-up chrome, not beside it: .mk-frame is the `.app` window (r12, --bg-2, 1px hairline,
   13px --text-2), .mk-side is `.app-side`, .mk-top is `.app-top`, .mk-pill is `.tag`, .mk-card is `.card-ui`, .mk-diff is `.code-win`.
   The outer frame stays Vesper's: a kit screen sits inside `.panel > .panel-inner` (a section) or `.shot-frame` (a hero), exactly
   like the demo's `.app`. Every colour, radius and font is a token from tokens.css — nothing here adds a colour, font or image.
   Grammar, method and worked examples: MOCKUPS.md.

   Root:   <div class="mk mk--dash" data-mock>…</div>            (data-mock always: the UI / type / copy checkers treat it as product UI)
   Window: <div class="mk-frame"><div class="mk-bar"><i></i><i></i><i></i><span>app.theirs.com</span></div><div class="mk-screen">…</div></div>
   Real:   <div class="mk" data-mock><div class="mk-frame"><div class="mk-bar">…</div><div class="mk-shot"><img src=THEIR-SHOT alt=… data-screen></div></div></div>
   One accent (--mint) per mock-up: .mk-nav.is-on.is-accent · .mk-pill--accent · .mk-bars .is-on · .mk-line .mk-draw · .mk-meter.is-accent ·
   .mk-tl.is-on · .mk-dl.is-add · .mk-term .mk-acc · .mk-toast i · .mk-delta.is-accent — pick ONE. Red / amber are status colours, not the accent.
   Vesper atoms that work inside a kit screen as they are: .status (+ .ping), .sev, .code, .kbd, .icon. */

/* ── Root ── */
.mk { --mk-w: 1120px; position: relative; width: 100%; max-width: var(--mk-w); margin-inline: auto; min-width: 0; font-family: var(--font); font-size: 13px; line-height: 1.5; letter-spacing: 0; color: var(--text-2); text-align: left; }
.mk *, .mk *::before, .mk *::after { box-sizing: border-box; }
.mk b, .mk strong { font-weight: 510; color: var(--text); }
.mk small { font-size: 12px; color: var(--faint); }
.mk ul, .mk ol { list-style: none; margin: 0; padding: 0; }
.mk-num { font-variant-numeric: tabular-nums; }
.mk-id { font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; color: var(--faint); white-space: nowrap; }
.mk-r { justify-self: end; text-align: right; }

/* ── Frame = Vesper's .app window chrome ── */
.mk-frame { position: relative; min-width: 0; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.mk-bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 50%, var(--bg-2)); }
.mk-bar i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--bg-5); }
.mk-bar span { flex: 0 1 280px; min-width: 0; margin-inline: auto; padding: 2px 12px; border-radius: var(--r-pill); background: var(--bg-3); border: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: var(--faint); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-bar::after { content: ""; flex: none; width: 39px; }   /* balances the three dots so the address sits centred */
.mk-screen { position: relative; min-width: 0; }
.mk-screen--side { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.mk-frame > img { display: block; width: 100%; height: auto; }
.mk-shot { position: relative; aspect-ratio: var(--mk-ratio, 16 / 10); overflow: hidden; background: var(--bg-2); }   /* a real screenshot cropped to the app part */
.mk-shot > img { position: absolute; left: var(--mk-x, 0); top: var(--mk-y, 0); width: var(--mk-zoom, 100%); max-width: none; height: auto; }

/* ── Sidebar = .app-side ── */
.mk-side { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 8px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 50%, var(--bg-2)); }
.mk-brand { display: flex; align-items: center; gap: 8px; padding: 6px 8px 12px; font-weight: 590; color: var(--text); white-space: nowrap; }
.mk-brand::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 5px; background: var(--bg-5); border: 1px solid var(--line-2); }
.mk-nav { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: var(--r-sm); color: var(--muted); white-space: nowrap; }
.mk-nav::before { content: ""; flex: none; width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid currentColor; opacity: .6; }
.mk-nav:has(> .icon)::before { display: none; }
.mk-nav > .icon { width: 15px; height: 15px; }
.mk-nav em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--faint); }
.mk-nav.is-on { background: var(--bg-4); color: var(--text); }
.mk-nav.is-on::before { opacity: 1; }
.mk-nav.is-on.is-accent::before, .mk-nav.is-on.is-accent > .icon { color: var(--mint); }
.mk-grp { padding: 14px 8px 4px; font-size: 11px; color: var(--faint); }

/* ── Top bar = .app-top ── */
.mk-top { display: flex; align-items: center; gap: 10px; min-width: 0; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.mk-top > b { font-weight: 510; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.mk-search { flex: 0 1 220px; min-width: 0; height: 28px; margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 10px; border-radius: var(--r); background: var(--bg-3); border: 1px solid var(--line); color: var(--faint); font-size: 12px; overflow: hidden; }
.mk-search::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.mk-search .kbd { margin-left: auto; padding: 2px 5px; font-size: 10.5px; }
.mk-top .mk-search + .mk-avatar, .mk-top .mk-btn + .mk-avatar { margin-left: 0; }
.mk-top > .mk-push { margin-left: auto; }
.mk-avatar { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--bg-5); font-size: 10px; font-weight: 590; color: var(--text-2); }
.mk-avatar--tint { background: var(--c, var(--blue)); color: var(--bg); font-weight: 700; }   /* data colour, as Vesper's .avatars i */
.mk-avatars { display: inline-flex; } .mk-avatars .mk-avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--bg-2); } .mk-avatars .mk-avatar:first-child { margin-left: 0; }

/* ── Body + grids ── */
.mk-main { display: flex; flex-direction: column; min-width: 0; }
.mk-body { display: grid; gap: 14px; min-width: 0; padding: 18px 20px; align-content: start; }
.mk-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mk-g2--wide { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.mk-title { font-size: 17px; font-weight: 590; letter-spacing: -.012em; color: var(--text); }   /* a record title, as .app-body h3 */

/* ── Stats: one hairline-ruled row, as Vesper's ruled grids ── */
.mk-stats { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.mk-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; background: var(--bg-3); }
.mk-stat:not(.mk-stats > *) { border: 1px solid var(--line); border-radius: var(--r); }
.mk-stat small { white-space: nowrap; }
.mk-stat > b { font-size: 24px; font-weight: 590; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-delta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.mk-delta.is-accent { color: var(--mint); } .mk-delta.is-bad { color: var(--red); }

/* ── Card = .card-ui (header row + body), skeleton lines ── */
.mk-card { position: relative; min-width: 0; padding: 14px; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r); }
.mk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -14px -14px 12px; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.mk-head b { font-weight: 510; color: var(--text-2); }
.mk-ln { display: block; height: 7px; width: var(--w, 60%); border-radius: 4px; background: var(--bg-4); }       /* text that is not the point: --w sets the width */
.mk-ln + .mk-ln { margin-top: 7px; }
.mk-ln--block { height: var(--h, 96px); width: 100%; border-radius: var(--r); background: var(--bg-4); }        /* a picture area that is not the point */

/* ── Pill = .tag (hairline pill, colour only in the dot) ── */
.mk-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); border: 1px solid var(--line); background: color-mix(in srgb, var(--text) 2%, transparent); font-size: 12px; line-height: 1; color: var(--text-2); white-space: nowrap; vertical-align: middle; }
.mk-pill::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--faint)); }
.mk-pill--plain::before { display: none; }
.mk-pill--bad { --c: var(--red); } .mk-pill--warn { --c: var(--amber); }
.mk-pill--accent { --c: var(--mint); color: var(--mint); background: var(--mint-soft); border-color: transparent; }
.mk-pill--sm { height: 20px; padding: 0 7px; font-size: 11px; }

/* ── Meter (progress, rollout, quota) ── */
.mk-meter { height: 6px; min-width: 40px; border-radius: var(--r-pill); background: var(--bg-4); overflow: hidden; }
.mk-meter i { display: block; width: var(--p, 50%); height: 100%; border-radius: inherit; background: var(--faint); }
.mk-meter.is-accent i { background: var(--mint); }

/* ── Table = .list rows (hairline rows at .05, mono IDs) ── */
.mk-table { display: grid; min-width: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); overflow: hidden; }
.mk-tr { display: grid; grid-template-columns: var(--cols, minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto); align-items: center; gap: 12px; min-height: 40px; padding: 0 14px; border-top: 1px solid var(--line-3); white-space: nowrap; }
.mk-tr > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mk-tr:first-child { border-top: 0; }
.mk-th { min-height: 34px; background: color-mix(in srgb, var(--bg) 50%, var(--bg-2)); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--faint); }
.mk-th + .mk-tr { border-top: 0; }
.mk-tr .mk-num { color: var(--muted); }
.mk-tr .mk-ln { margin: 0; }
.mk-who { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text-2); }

/* ── Chart = .chart (one accent series) ── */
.mk-chart { min-width: 0; padding: 14px 16px; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r); }
.mk-chart .mk-head { margin: 0 0 12px; padding: 0; border: 0; }
.mk-bars { display: flex; align-items: flex-end; gap: 4px; height: var(--h, 96px); }
.mk-bars i { flex: 1; min-width: 0; height: var(--v, 40%); border-radius: 3px 3px 0 0; background: var(--bg-5); }
.mk-bars i.is-on { background: var(--mint); }
.mk-axis { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.mk-line { display: block; width: 100%; height: var(--h, 96px); overflow: visible; }
.mk-line .mk-grid { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mk-line .mk-draw { fill: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mk-line .mk-ghost { fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.mk-line .mk-area { fill: var(--mint); opacity: .08; }

/* ── List: rows with an avatar ── */
.mk-list { display: flex; flex-direction: column; min-width: 0; }
.mk-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line-3); border-radius: var(--r-sm); }
.mk-row:first-child { border-top-color: transparent; }
.mk-row > div { display: grid; gap: 5px; min-width: 0; }
.mk-row > div > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-row .mk-ln { margin: 0; }
.mk-row > time, .mk-row > span:last-child { font-size: 12px; color: var(--faint); white-space: nowrap; }
.mk-row.is-on { background: var(--bg-4); border-top-color: transparent; }
.mk-row.is-on + .mk-row { border-top-color: transparent; }
.mk-card > .mk-list { margin: -6px -8px; }

/* ── Form = .field / .input; buttons = .btn (never coloured) ── */
.mk-form { display: grid; gap: 12px; }
.mk-field { display: grid; gap: 6px; min-width: 0; }
.mk-field label { font-size: 12px; color: var(--muted); }
.mk-field > span { display: flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r); background: var(--bg-3); border: 1px solid var(--line); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-field > span:empty::before { content: ""; width: 44%; height: 7px; border-radius: 4px; background: var(--bg-4); }
.mk-field--row { grid-template-columns: 1fr 1fr; gap: 10px; }
.mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 13px; border-radius: var(--r-pill); background: var(--bg-4); border: 1px solid var(--line); font-size: 12.5px; font-weight: 510; letter-spacing: -.01em; color: var(--text); white-space: nowrap; }
.mk-btn--primary { background: var(--cta); border-color: transparent; color: var(--cta-ink); }
.mk-btn--block { width: 100%; }
.mk-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ── Terminal ── */
.mk-term { min-width: 0; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg); font-family: var(--mono); font-size: 12px; line-height: 1.8; color: var(--text-2); }
.mk-term > div { white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.mk-term .mk-dim { color: var(--faint); } .mk-term .mk-acc { color: var(--mint); } .mk-term .mk-err { color: var(--red); } .mk-term .mk-warn { color: var(--amber); }

/* ── Log: timestamped events with a level ── */
.mk-log { display: grid; min-width: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); overflow: hidden; font-family: var(--mono); font-size: 11.5px; }
.mk-log > div { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px; min-height: 32px; padding: 0 12px; border-top: 1px solid var(--line-3); color: var(--text-2); white-space: nowrap; }
.mk-log > div:first-child { border-top: 0; }
.mk-log time { color: var(--faint); }
.mk-log > div > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.mk-log .mk-ln { margin: 0; }
.mk-log .mk-pill { height: 18px; padding: 0 6px; font-family: var(--font); font-size: 10.5px; }

/* ── Diff = .code-win ── */
.mk-diff { min-width: 0; border: 1px solid var(--line); border-radius: var(--r); background: color-mix(in srgb, var(--bg) 50%, var(--bg-2)); overflow: hidden; font-family: var(--mono); font-size: 12px; line-height: 1.75; }
.mk-diff > .mk-head { margin: 0; padding: 8px 14px; font-size: 11.5px; color: var(--faint); }
.mk-diff > .mk-head b { font-weight: 500; }
.mk-diff > div:not(.mk-head) { padding: 10px 0; }
.mk-dl { display: block; padding-right: 16px; white-space: pre; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.mk-dl i { display: inline-block; width: 40px; padding-right: 14px; text-align: right; font-style: normal; color: var(--faint); }
.mk-dl.is-add { background: rgba(var(--mint-rgb), .09); } .mk-dl.is-add i { color: var(--mint); }
.mk-dl.is-del { background: var(--red-soft); color: color-mix(in srgb, var(--red) 45%, var(--text-2)); } .mk-dl.is-del i { color: var(--red); }
.mk-dl .mk-k { color: var(--violet); } .mk-dl .mk-c { color: var(--faint); }

/* ── Timeline (steps, history; the changelog dots) ── */
.mk-timeline { display: grid; }
.mk-tl { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 0 0 14px 22px; }
.mk-tl::before { content: ""; position: absolute; left: 0; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg-2); border: 1.5px solid var(--faint); }
.mk-tl::after { content: ""; position: absolute; left: 4px; top: 17px; bottom: 1px; width: 1px; background: var(--line-2); }
.mk-tl:last-child { padding-bottom: 0; } .mk-tl:last-child::after { display: none; }
.mk-tl.is-done::before { background: var(--faint); }
.mk-tl.is-on::before { background: var(--mint); border-color: var(--mint); box-shadow: 0 0 0 4px var(--mint-soft); }
.mk-tl > div { display: grid; gap: 5px; min-width: 0; }
.mk-tl b { font-weight: 510; }
.mk-tl time, .mk-tl small { font-size: 12px; color: var(--faint); white-space: nowrap; }
.mk-tl .mk-ln { margin: 0; }

/* ── Toast, float, cursor (the floating pieces carry Vesper's only shadow) ── */
.mk-toast { position: absolute; z-index: 3; left: var(--x, -18px); bottom: var(--y, 28px); display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: var(--r-md); background: var(--bg-3); border: 1px solid var(--line-2); box-shadow: 0 24px 60px rgb(0 0 0 / .55); white-space: nowrap; }
.mk-toast i { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--mint-soft); }
.mk-toast i::before { content: ""; width: 9px; height: 5px; border-left: 1.6px solid var(--mint); border-bottom: 1.6px solid var(--mint); transform: translateY(-1px) rotate(-45deg); }
.mk-toast--plain i { background: var(--bg-5); } .mk-toast--plain i::before { border-color: var(--text-2); }
.mk-toast b { display: block; font-size: 12.5px; }
.mk-toast small { display: block; }
.mk-toast--tr { left: auto; bottom: auto; right: var(--x, -18px); top: var(--y, 56px); }
.mk-float { position: absolute; z-index: 3; right: 0; bottom: 0; width: min(320px, 100%); border-radius: var(--r-md); background: var(--bg-3); border: 1px solid var(--line-2); box-shadow: 0 24px 60px rgb(0 0 0 / .55); }
.mk-float.mk-card { padding: 14px; }
.mk-cursor { position: absolute; z-index: 4; left: var(--x, 50%); top: var(--y, 50%); width: 14px; height: 18px; background: var(--text); clip-path: polygon(0 0, 100% 64%, 58% 68%, 76% 100%, 58% 100%, 44% 72%, 0 94%); filter: drop-shadow(0 2px 4px rgb(0 0 0 / .6)); pointer-events: none; }

/* ── Phone parts ── */
.mk-tabbar { display: flex; justify-content: space-around; align-items: center; margin-top: auto; padding: 12px 22px 20px; border-top: 1px solid var(--line); }
.mk-tabbar i { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--faint); }
.mk-tabbar i.is-on { background: var(--text); border-color: var(--text); }

/* ── Patterns ── */
.mk--dash .mk-screen { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.mk--dash .mk-screen > .mk-main:only-child { grid-column: 1 / -1; }

.mk--detail .mk-body { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.mk--detail .mk-body > .mk-span { grid-column: 1 / -1; }
.mk-aside { display: grid; gap: 14px; min-width: 0; align-content: start; }

.mk--list .mk-table { width: 100%; }

.mk--flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; }
.mk--flow > .mk-frame { display: flex; flex-direction: column; }
.mk--flow .mk-bar { height: 32px; }
.mk--flow .mk-screen { flex: 1; display: flex; flex-direction: column; padding: 12px; }
.mk--flow .mk-screen > * { flex: 1; }
.mk-arrow { position: relative; align-self: center; width: 32px; height: 20px; flex: none; }
.mk-arrow::before { content: ""; position: absolute; left: 2px; right: 8px; top: 50%; height: 1px; background: var(--line-2); }
.mk-arrow::after { content: ""; position: absolute; right: 7px; top: 50%; width: 7px; height: 7px; border-top: 1px solid var(--muted); border-right: 1px solid var(--muted); transform: translateY(-50%) rotate(45deg); }

.mk--mobile { --mk-w: 310px; }
.mk--mobile > .mk-frame { padding: 7px; border-radius: 44px; border-color: var(--line-2); background: var(--bg-3); }
.mk--mobile .mk-bar { position: relative; z-index: 1; height: 34px; padding: 0; border: 0; background: none; justify-content: center; }
.mk--mobile .mk-bar i, .mk--mobile .mk-bar span, .mk--mobile .mk-bar::after { display: none; }
.mk--mobile .mk-bar::before { content: ""; width: 72px; height: 20px; border-radius: var(--r-pill); background: var(--bg); }   /* the island */
.mk--mobile .mk-screen { display: flex; flex-direction: column; aspect-ratio: 9 / 16.5; margin-top: -34px; padding-top: 34px; border-radius: 37px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.mk--mobile .mk-top { height: auto; padding: 16px 18px 8px; border: 0; }
.mk--mobile .mk-top > b { font-size: 20px; font-weight: 510; letter-spacing: -.022em; }
.mk--mobile .mk-body { padding: 4px 14px 14px; gap: 10px; }

.mk--split { padding: 0 0 48px; }
.mk--split > .mk-frame { width: calc(100% - 96px); }

.mk--stack, .mk--stack.mk--flow { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
.mk--stack .mk-arrow { justify-self: center; transform: rotate(90deg); }
.mk--stack.mk--split { padding-bottom: 0; } .mk--stack.mk--split > .mk-frame { width: 100%; }
.mk--stack .mk-float { position: static; width: 100%; margin-top: 12px; box-shadow: none; }

/* ── Motion: rides on Vesper's reveal (.js + .reveal → .in). Rows build in at 70ms steps, bars rise, the line draws,
   meters fill, floating pieces arrive last. ?static / reduced motion: vesper.js reveals at once and tokens.css kills transitions. ── */
.js .reveal .mk-tr, .js .reveal .mk-row, .js .reveal .mk-tl, .js .reveal .mk-log > div, .js .reveal .mk-dl, .js .reveal .mk-term > div { transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(380ms + var(--k, 0) * 70ms); }
.js .reveal:not(.in) .mk-tr, .js .reveal:not(.in) .mk-row, .js .reveal:not(.in) .mk-tl, .js .reveal:not(.in) .mk-log > div, .js .reveal:not(.in) .mk-dl, .js .reveal:not(.in) .mk-term > div { opacity: 0; transform: translateY(8px); }
.js .reveal :is(.mk-tr, .mk-row, .mk-tl, .mk-log > div, .mk-dl, .mk-term > div, .mk-bars i):nth-child(2) { --k: 1; }
.js .reveal :is(.mk-tr, .mk-row, .mk-tl, .mk-log > div, .mk-dl, .mk-term > div, .mk-bars i):nth-child(3) { --k: 2; }
.js .reveal :is(.mk-tr, .mk-row, .mk-tl, .mk-log > div, .mk-dl, .mk-term > div, .mk-bars i):nth-child(4) { --k: 3; }
.js .reveal :is(.mk-tr, .mk-row, .mk-tl, .mk-log > div, .mk-dl, .mk-term > div, .mk-bars i):nth-child(5) { --k: 4; }
.js .reveal :is(.mk-tr, .mk-row, .mk-tl, .mk-log > div, .mk-dl, .mk-term > div, .mk-bars i):nth-child(6) { --k: 5; }
.js .reveal :is(.mk-tr, .mk-row, .mk-tl, .mk-log > div, .mk-dl, .mk-term > div, .mk-bars i):nth-child(n+7) { --k: 6; }
.js .reveal .mk-bars i { transform-origin: bottom; transition: transform 1s var(--ease-out) calc(450ms + var(--k, 0) * 45ms); }
.js .reveal:not(.in) .mk-bars i { transform: scaleY(0); }
.js .reveal .mk-line .mk-draw { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2s var(--ease-io) .5s; }
.js .reveal:not(.in) .mk-line .mk-draw { stroke-dashoffset: 1; }
.js .reveal .mk-line .mk-area { transition: opacity 1s var(--ease-out) 1.6s; }
.js .reveal:not(.in) .mk-line .mk-area { opacity: 0; }
.js .reveal .mk-meter i { transform-origin: left center; transition: transform 1.2s var(--ease-out) .5s; }
.js .reveal:not(.in) .mk-meter i { transform: scaleX(0); }
.js .reveal .mk-toast, .js .reveal .mk-float { transition: opacity 1s var(--ease-out) .9s, transform 1.2s var(--ease-out) .9s; }
.js .reveal:not(.in) .mk-toast, .js .reveal:not(.in) .mk-float { opacity: 0; transform: translate(20px, 16px) scale(.97); }

/* ── Responsive (Vesper's 900px step, plus phones) ── */
@media (max-width: 900px) {
  .mk-side { display: none; }
  .mk--dash .mk-screen, .mk-screen--side { grid-template-columns: minmax(0, 1fr); }
  .mk--detail .mk-body, .mk-g2, .mk-g2--wide { grid-template-columns: minmax(0, 1fr); }
  .mk--flow { grid-template-columns: minmax(0, 1fr); }
  .mk--flow .mk-arrow { justify-self: center; transform: rotate(90deg); }
  .mk--split { padding-bottom: 0; } .mk--split > .mk-frame { width: 100%; }
  .mk--split .mk-float { position: static; width: 100%; margin-top: 12px; box-shadow: none; }
}
@media (max-width: 640px) {
  .mk-body { padding: 14px; }
  .mk-search, .mk-sm-hide { display: none; }
  .mk-top > .mk-avatar:last-child, .mk-top > .mk-avatars:last-child { margin-left: auto; }
  .mk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-stats > .mk-stat:nth-child(3):last-child { grid-column: 1 / -1; }
  .mk-stat > b { font-size: 20px; }
  .mk-tr { grid-template-columns: var(--cols-sm, var(--cols, minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto)); gap: 10px; padding: 0 12px; }
  .mk-toast { left: 10px; bottom: 10px; max-width: calc(100% - 20px); white-space: normal; }
  .mk-toast--tr { left: auto; right: 10px; top: 46px; bottom: auto; }
  .mk-bar span { flex-basis: 180px; }
  .mk-shot { aspect-ratio: var(--mk-ratio-sm, var(--mk-ratio, 16 / 10)); }   /* phones: crop a wide capture to its readable corner */
  .mk-shot > img { left: var(--mk-x-sm, var(--mk-x, 0)); top: var(--mk-y-sm, var(--mk-y, 0)); width: var(--mk-zoom-sm, var(--mk-zoom, 100%)); }
}