/* ================= DESIGN CANVAS (.mk-canvas, round 2, 2026-10-09) =================
   One base for every illustration of "a Figma file shown as a file": dotted canvas, labelled frames, selection box, callouts, caption.
   Origin: the approved UI/UX hero prototype (.uxh-proto), moved here with zero visual change. Rules: DESIGN-PRINCIPLES §13, PROPOSAL §10.
   Loaded right after site.css. Pages supply data and choose parts; they never restyle the canvas.
   - Dotted canvas = a design file shown as a file (frames, labels, selection, callouts). Paper = a document someone prints or receives.
     A window on --plane = a tool UI (editor, dashboard). The canvas stays dark in BOTH themes, like Figma's own dark canvas.
   - Figma blue (#18a0fb) is the tool's signal colour for every annotation on the canvas (connectors, callouts, selection, spec labels).
   Parts:
     .mk-canvas            shell (window): wbar + stage + caption
     .mk-canvas-stage      the dotted canvas. data-grid="dots" (default) | "lines" (themed line grid, Custom hero build states) | "none" (flat)
     .mk-canvas-frame      a labelled artboard: .mk-canvas-label above, the artboard (any white/designed surface) below
     .mk-canvas-sel        selection box with 4 handles + size tag
     .mk-canvas-proto      the clickable prototype stage (phone artboard .mk-canvas-ph, hit areas, callouts, connector lines); behaviour: itbCanvasProto() in js/mk-canvas.js
     .mk-canvas-cap        caption bar (strong title + one sentence)  */
:root{--mk-cv-bg:#2b2d31;--mk-cv-dot:#3a3d42;--mk-cv-blue:#18a0fb;--mk-cv-panel:#1d2024;--mk-cv-ink:#fff;--mk-cv-mut:#aeb6bd;--mk-cv-bezel:#0c0d0f}

.mk-canvas{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--plane);min-width:0}
.mk-canvas .wbar em{margin-left:auto;font-style:normal;color:var(--accent)}
.mk-canvas>.mk-canvas-stage{flex:1}

.mk-canvas-stage{position:relative;background-color:var(--mk-cv-bg);background-image:radial-gradient(var(--mk-cv-dot) 1px,transparent 1px);background-size:1rem 1rem}
.mk-canvas-stage[data-grid="none"]{background-image:none}
.mk-canvas-stage[data-grid="lines"]{background-color:transparent;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:1.5em 1.5em}

/* labelled frame (artboard): Figma puts the frame name above its top-left corner */
.mk-canvas-frame{display:flex;flex-direction:column;gap:.375rem;min-width:0;margin:0}
.mk-canvas-label{font:500 max(12px,.75rem)/1.2 var(--body);color:var(--mk-cv-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-canvas-frame.fill>:not(.mk-canvas-label){flex:1;min-height:0}

/* selection box: 4 handles + size tag, in Figma blue. data-tone="light" = white, for an editor over a photo (Photo crop box); the dots never go with it */
.mk-canvas-sel{--mk-sel:var(--mk-cv-blue);position:absolute;inset:-3px;border:1.5px solid var(--mk-sel);pointer-events:none}
.mk-canvas-sel[data-tone="light"]{--mk-sel:#fff}
.mk-canvas-sel i{position:absolute;width:6px;height:6px;background:#fff;border:1.5px solid var(--mk-sel)}
.mk-canvas-sel[data-tone="light"] i{border-color:rgba(20,24,27,.55)}
.mk-canvas-sel i:nth-child(1){left:-4px;top:-4px}.mk-canvas-sel i:nth-child(2){right:-4px;top:-4px}.mk-canvas-sel i:nth-child(3){left:-4px;bottom:-4px}.mk-canvas-sel i:nth-child(4){right:-4px;bottom:-4px}
.mk-canvas-sel b{position:absolute;left:-1.5px;top:-1.75em;font:500 .6875em var(--body);background:var(--mk-sel);color:#fff;padding:.15em .4em;white-space:nowrap}

/* caption bar */
.mk-canvas-cap{display:grid;gap:.125rem;padding:.75rem 1rem;border-top:1px solid var(--line);background:var(--ink)}
.mk-canvas-cap strong,.mk-canvas-cap b{font:500 .9375rem var(--display)}
.mk-canvas-cap span{font-size:.875rem;color:var(--muted)}

/* ---- clickable prototype (moved verbatim from the UI/UX hero v3) ----
   One real app, clickable like a Figma prototype. No pins: labels beside the phone, each with a thin line to the exact control it opens.
   Labels and the controls themselves both navigate. Only the taps that work on a screen are shown. */
.mk-canvas-proto{min-height:26rem}
.mk-canvas-ph{position:absolute;top:1.5rem;bottom:1.5rem;left:50%;translate:-50% 0;aspect-ratio:560/1213;border-radius:1.5rem;overflow:hidden;border:5px solid var(--mk-cv-bezel);background:#000;z-index:1}
.mk-canvas-scr{position:relative;height:100%;line-height:0}
.mk-canvas-scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;visibility:hidden}.mk-canvas-scr img.on{visibility:visible}
.mk-canvas-hit{all:unset;position:absolute;cursor:pointer;border-radius:6px;transition:background var(--fast),box-shadow var(--fast)}
.mk-canvas-hit:hover,.mk-canvas-hit.lit{background:rgba(24,160,251,.22);box-shadow:0 0 0 1.5px var(--mk-cv-blue)}
.mk-canvas-hit:focus-visible{box-shadow:0 0 0 2px var(--mk-cv-blue)}
.mk-canvas-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
.mk-canvas-lines path{fill:none;stroke:var(--mk-cv-blue);stroke-width:1.5}
.mk-canvas-lines circle{fill:var(--mk-cv-blue);stroke:#fff;stroke-width:1.5}
.mk-canvas-call{all:unset;box-sizing:border-box;position:absolute;z-index:3;cursor:pointer;display:grid;gap:.0625rem;max-width:9.5rem;padding:.4375rem .625rem;border:1px solid var(--mk-cv-blue);border-radius:var(--r-sm);
  background:var(--mk-cv-panel);color:#fff;font:500 .8125rem/1.2 var(--body);transition:background var(--fast),color var(--fast)}
.mk-canvas-call small{font:400 .6875rem/1.25 var(--body);color:var(--mk-cv-mut)}
.mk-canvas-call:hover,.mk-canvas-call:focus-visible{background:var(--mk-cv-blue);color:#fff}.mk-canvas-call:hover small,.mk-canvas-call:focus-visible small{color:#e8f5ff}
.mk-canvas-call:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---- adoption: a canvas inside the shared window tabs (.wtabs-body is the canvas; UI/UX #process, Custom hero) ---- */
.wtabs-body.mk-canvas-stage{align-content:start}
.wtabs-body.mk-canvas-stage>.mk-canvas-frame{width:100%;max-width:62rem;margin-inline:auto}

/* ---- adoption: Branding brand board (tiles are frames on the canvas) ---- */
.mk-canvas-stage.mk-canvas-board{padding:.875rem}

/* ---- older tab bars moved to the shared .wtabs: six short category titles share a narrow hero window, so the padding is tighter there (the bar still scrolls when they don't fit) ---- */
@media (min-width:761px){.pv-win .wtabs-bar [role="tab"]{padding-inline:.5rem}.bc-win .wtabs-bar [role="tab"]{padding-inline:.625rem}}

/* PHONE (mk-canvas.css keeps its own phone rules) */
@media (max-width:760px){
 .mk-canvas-proto{min-height:27rem}.mk-canvas-ph{top:1rem;bottom:1rem}
 .mk-canvas-call{max-width:6.5rem;padding:.375rem .5rem;min-height:2.75rem;align-content:center}.mk-canvas-call small{display:none}
}