/* Ombra product mock-up kit (mk-). Loads BEFORE ombra.css (kit base first; section layout in ombra.css wins). Tokens only. See MOCKUPS.md.
   Every mock-up root is a frosted window (.mk-win) that floats on a photo plate or on black. */

/* ── Product window (mk-): frosted dark window that floats on a photo plate ── */
.mk-win { --muted: var(--muted-on-glass); position: relative; border-radius: var(--r-win); background: var(--glass); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2); backdrop-filter: blur(22px) saturate(120%); -webkit-backdrop-filter: blur(22px) saturate(120%); color: var(--text-2); font-size: 13px; line-height: 1.45; overflow: hidden; }
.mk-win::before { content: ""; position: absolute; inset: 0; background: var(--glow); pointer-events: none; }
/* The horizon edge: a 1px line in the sky colours along the top of every window (Ombra's mark) */
.mk-win::after { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: var(--horizon); opacity: .9; pointer-events: none; z-index: 3; }
.mk-bar { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--text); font-weight: 500; }
.mk-bar .mark { width: 20px; height: 20px; }
.mk-bar__end { margin-left: auto; display: flex; gap: 6px; color: var(--muted); }
.mk-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--r-pill); background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); font-size: 13px; white-space: nowrap; }
.mk-pill .ic { width: 14px; height: 14px; stroke-width: 1.8; }
.mk-pill--on { background: rgba(255,255,255,.14); color: var(--text); }
.mk-msg { max-width: 78%; padding: 10px 14px; border-radius: 14px; background: var(--surface-3); color: var(--text); font-size: 13px; }
.mk-msg--me { margin-left: auto; border-bottom-right-radius: 4px; }
.mk-ans { display: grid; gap: 10px; color: var(--text-2); }
.mk-src { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-src span { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 8px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; color: var(--text-2); }
.mk-src span b { font-weight: 500; color: var(--accent-ink); }
.mk-input { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 8px 8px 14px; border-radius: 12px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.mk-input__send { margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tint); color: var(--on-light); }
.mk-input__send .ic { width: 14px; height: 14px; stroke-width: 2.2; }
.mk-act { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line); }
.mk-act__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.07); color: var(--text); }
.mk-act b { display: block; color: var(--text); font-weight: 500; }
.mk-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mk-field { display: grid; gap: 6px; }
.mk-field label { font-size: 12px; color: var(--muted); }
.mk-select { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 10px; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.mk-select .ic:last-child { margin-left: auto; color: var(--muted); }
.mk-tabs { display: grid; grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 1px var(--line); }
.mk-tabs span { display: grid; place-items: center; height: 30px; border-radius: 9px; font-size: 13px; color: var(--muted); }
.mk-tabs span.on { background: rgba(255,255,255,.1); color: var(--text); }
.mk-stat b { display: block; font: 400 34px/1.1 var(--font-display); letter-spacing: -.04em; color: var(--tint); }
.mk-stat span { font-size: 12px; color: var(--muted); }
.mk-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); color: var(--text); font-size: 12px; font-weight: 600; flex: none; }

/* Ombra mock-up kit — extra generic atoms (mk-). Tokens only. Merged into mockups.css.
   Colour rule: greys + one accent dot / toggle / "on" bar; status colours (--success --warning --danger --info) only on status. */

/* ── Body + grids inside a window ── */
.mk-body { position: relative; display: grid; gap: 14px; padding: 18px; align-content: start; }
.mk-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mk-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mk-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mk-row > .grow { flex: 1; min-width: 0; }
.mk-card { display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: 12px; background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line); }
.mk-card > b, .mk-h { color: var(--text); font-weight: 500; font-size: 13px; }
.mk-cap { font-size: 12px; color: var(--muted); }

/* ── Table: header row + 3–5 rows of real cells ── */
.mk-table { display: grid; font-size: 12.5px; }
.mk-tr { display: grid; grid-template-columns: var(--mk-cols, 1.4fr 1fr 1fr 1fr); align-items: center; gap: 12px; min-height: 40px; padding: 0 4px; border-bottom: 1px solid var(--line); color: var(--text-2); }
.mk-tr:last-child { border-bottom: 0; }
.mk-tr > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-tr b { color: var(--text); font-weight: 500; }
.mk-th { min-height: 32px; font-size: 11.5px; color: var(--muted); }
.mk-tr.on { background: rgba(255,255,255,.05); border-radius: 8px; }
.mk-tr .r { text-align: right; }

/* ── Status: a dot + 1–2 words; the only place status colours appear ── */
.mk-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.mk-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.mk-status.is-ok::before { background: var(--success); }
.mk-status.is-warn::before { background: var(--warning); }
.mk-status.is-bad::before { background: var(--danger); }
.mk-status.is-info::before { background: var(--info); }
.mk-status.is-live::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ── Bars: vertical bars, grey; one "on" bar in white is the focal value ── */
.mk-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 6px; height: var(--mk-bh, 96px); }
.mk-bars i { display: block; height: var(--v, 50%); border-radius: 5px 5px 2px 2px; background: rgba(255,255,255,.14); }
.mk-bars i.on { background: var(--tint); }
.mk-axis { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--muted); text-align: center; }

/* ── Meter: progress, quota, match score ── */
.mk-meter { height: 6px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.mk-meter i { display: block; width: var(--p, 50%); height: 100%; border-radius: inherit; background: var(--text-2); }
.mk-meter--accent i { background: var(--accent); }

/* ── List: avatar or icon + name/sub + meta on the right ── */
.mk-list { display: grid; }
.mk-li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.mk-li:last-child { border-bottom: 0; }
.mk-li > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; color: var(--text); font-weight: 500; }
.mk-li small { font-size: 12px; font-weight: 400; color: var(--muted); }
.mk-li.on { margin: 0 -8px; padding: 10px; border-radius: 10px; border-bottom-color: transparent; background: rgba(255,255,255,.06); }
.mk-avatar--sm { width: 24px; height: 24px; font-size: 10px; }

/* ── Calendar: month grid, one selected day (light), booked days carry a dot ── */
.mk-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 12px; }
.mk-cal > span { display: grid; place-items: center; height: 30px; border-radius: 8px; color: var(--text-2); position: relative; }
.mk-cal > .h { height: 22px; font-size: 11px; color: var(--muted); }
.mk-cal > .off { visibility: hidden; }   /* blank cells before the 1st */
.mk-cal > .busy::after { content: ""; position: absolute; bottom: 3px; width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }
.mk-cal > .on { background: var(--tint); color: var(--on-light); font-weight: 600; }
.mk-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-slots .mk-pill { height: 30px; }

/* ── Steps: a vertical checklist / run log (done · now · next) ── */
.mk-steps { display: grid; gap: 2px; }
.mk-step { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px; min-height: 30px; color: var(--text-2); font-size: 12.5px; }
.mk-step::before { content: ""; justify-self: center; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--muted); }
.mk-step.done::before { background: var(--text-2); box-shadow: none; }
.mk-step.now { color: var(--text); }
.mk-step.now::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mk-step small { font-size: 11.5px; color: var(--muted); }

/* ── Code / log lines (dev tools) ── */
.mk-code { display: grid; gap: 3px; padding: 12px 14px; border-radius: 10px; background: rgba(0,0,0,.4); box-shadow: inset 0 0 0 1px var(--line); font: 400 11.5px/1.55 var(--mono); color: var(--muted); overflow: hidden; }
.mk-code span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-code b { font-weight: 400; color: var(--text); }
.mk-code .err { color: var(--danger); }

/* ── Key / value rows (a record) ── */
.mk-kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 12.5px; }
.mk-kv dt { color: var(--muted); }
.mk-kv dd { margin: 0; color: var(--text); text-align: right; }

/* ── Toast: one floating confirmation that overlaps the window edge ── */
.mk-toast { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px 11px 12px; border-radius: 12px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-2); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: var(--text); font-size: 13px; white-space: nowrap; }
.mk-toast small { display: block; font-size: 11.5px; color: var(--muted-on-glass); }
.mk-toast .mk-dot { flex: none; }

/* ── Phone frame: a narrow window with rounded shell for on-the-go tools ── */
.mk-phone { width: 100%; max-width: 300px; border-radius: 34px; padding: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-2); }
.mk-phone > .mk-win { border-radius: 26px; }
.mk-phone .mk-notch { display: block; width: 84px; height: 22px; margin: 8px auto 0; border-radius: 12px; background: rgba(0,0,0,.6); }

/* ── Framed real screenshot (path 1): the customer's own screen inside the window ── */
.mk-shot { display: block; width: 100%; height: var(--mk-h, auto); object-fit: cover; object-position: var(--mk-pos, 50% 0); }

@media (max-width: 560px) {
  .mk-g3 { grid-template-columns: 1fr 1fr; }
  .mk-g2--stack { grid-template-columns: 1fr; }
  .mk-tr { gap: 8px; grid-template-columns: var(--mk-cols-sm, var(--mk-cols, 1.4fr 1fr 1fr 1fr)); }
  .mk-tr .hide-sm { display: none; }
}