/* Canvas surface: edge to edge.
 *
 * In desktop canvas mode the canvas box is inset (--cw-t/-r/-b/-l on
 * .canvas-wrap) so fit, centre-on-step and fit-all keep working in the area
 * that is not covered by the floating rail, toolbar and inspector. That box
 * used to be the whole painted surface, which left a visible margin of page
 * colour around it. Here the box and its maths are left exactly as they are:
 * the grid is painted by a pseudo-element that grows outwards by the same
 * insets, so the surface fills the screen. Because the pseudo-element belongs
 * to #canvas, dragging or clicking the margin pans and deselects exactly like
 * the box itself. Nodes are no longer clipped at the box edge. The editor
 * shell still clips at the screen edge.
 */
@media (min-width:821px){
  /* :root raises specificity above the equal-weight !important rules in
     pr64-cascade-fix.css and pr64-ui-completion.css, which load later. */
  :root .app.pr28-canvas-mode .canvas{
    isolation:isolate;
    overflow:visible!important;
    background:transparent!important;
  }
  :root .app.pr28-canvas-mode .viewport{
    overflow:visible!important;
    background:transparent!important;
  }
  :root .app.pr28-canvas-mode .canvas::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:calc(var(--cw-t,0px) * -1) calc(var(--cw-r,0px) * -1) calc(var(--cw-b,0px) * -1) calc(var(--cw-l,0px) * -1);
    background-color:#FAFAF9;
    background-image:radial-gradient(circle at 1px 1px,rgba(114,107,98,.16) 1px,transparent 0);
    background-size:24px 24px;
  }
  :root[data-theme="dark"] .app.pr28-canvas-mode .canvas,
  :root[data-theme="dark"] .app.pr28-canvas-mode .viewport{
    background:transparent!important;
  }
  :root[data-theme="dark"] .app.pr28-canvas-mode .canvas::before{
    background-color:#171512;
    background-image:radial-gradient(circle at 1px 1px,rgba(169,159,148,.09) 1px,transparent 0);
  }
}

/* Overview minimap: the visible area of the canvas */
.minimap-body .mini-viewport{position:absolute;pointer-events:none;box-sizing:border-box;border:1.5px solid var(--primary,#5b5bd6);background:color-mix(in srgb,var(--primary,#5b5bd6) 12%,transparent);border-radius:3px}
/* Stacking in canvas mode: toast above the bottom toolbar, inspector below the full bar */
@media (min-width:821px){
  .app.pr28-canvas-mode ~ .toast,body:has(.app.pr28-canvas-mode) .toast{bottom:76px;z-index:60}
  .app.pr28-canvas-mode.pr28-topbar-open .inspector{top:86px;transition:top .18s ease}
}

/* Inline field validation (replaces the browser bubble) */
.field-error{display:block;margin-top:5px;color:var(--red,#c0392b);font-size:12px;font-weight:600;line-height:1.35}
[aria-invalid="true"]{border-color:var(--red,#c0392b)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--red,#c0392b) 14%,transparent)}
/* RACI roles block in the step inspector */
.raci-add{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.raci-combo{position:relative;flex:1;min-width:0}
.raci-add input{width:100%;min-width:0;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);padding:9px 10px;font-size:11px;line-height:1.2;outline:0}
.raci-add input:focus{border-color:var(--primary,#5b5bd6);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary,#5b5bd6) 14%,transparent)}
.raci-add input::placeholder{color:var(--muted)}
.raci-options{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;max-height:200px;overflow:auto;padding:6px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow-md,0 8px 24px rgba(0,0,0,.12))}
.raci-option{display:block;width:100%;text-align:left;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--ink);font-size:12px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.raci-option:hover,.raci-option.active{background:var(--surface-soft,#f5f5f7)}
.raci-option.created{color:var(--primary,#5b5bd6);font-weight:600}
.raci-list{display:flex;flex-direction:column;gap:8px}
.raci-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name clear" "chips chips";align-items:center;gap:6px 4px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface,#fff)}
.raci-row strong{grid-area:name;min-width:0;font-size:11px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.raci-chips{grid-area:chips;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.raci-chip{min-height:24px;border:1px solid var(--line);border-radius:7px;background:var(--surface,#fff);color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.raci-chip:hover{border-color:var(--ink);color:var(--ink)}
/* One colour per letter, used on the chips, the legend and the matrix */
.raci-chip.on{border-color:var(--raci-c);background:color-mix(in srgb,var(--raci-c) 13%,var(--surface,#fff));color:var(--raci-ink)}
.raci-chip:hover{border-color:var(--raci-c,var(--ink))}
[data-raci-toggle="r"],.raci-l-r{--raci-c:#2f6fed;--raci-ink:#1d4fb8}
[data-raci-toggle="a"],.raci-l-a{--raci-c:#ff6200;--raci-ink:#b24100}
[data-raci-toggle="c"],.raci-l-c{--raci-c:#8a4fe0;--raci-ink:#6a30b8}
[data-raci-toggle="i"],.raci-l-i{--raci-c:#12945a;--raci-ink:#0b6d41}
.raci-l{display:inline-block;min-width:16px;padding:1px 4px;border-radius:5px;background:color-mix(in srgb,var(--raci-c) 14%,transparent);color:var(--raci-ink);font-size:10px;font-weight:700;text-align:center;line-height:1.4}
.raci-chip:focus-visible,.raci-clear:focus-visible{outline:2px solid var(--orange,#FF6200);outline-offset:2px}
.raci-clear{grid-area:clear;min-width:22px;min-height:22px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:14px;line-height:1;cursor:pointer}
.raci-clear:hover{background:rgba(0,0,0,.06);color:var(--red,#c0392b)}
.raci-warning{display:block;margin-top:8px;color:var(--amber,#b26a00);font-size:12px;font-weight:600}
.raci-matrix .raci-cell{text-align:center;font-weight:700;letter-spacing:.08em;white-space:nowrap}

/* Keyboard shortcut cheat sheet */
.shortcut-table td{padding:8px 10px;font-size:12px}
.shortcut-keys{white-space:nowrap;width:1%}
.shortcut-table kbd{display:inline-block;min-width:22px;padding:2px 7px;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;background:var(--surface-soft,#f5f5f7);color:var(--ink);font:600 11px/1.4 inherit;text-align:center}

.raci-legend{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:8px;color:var(--muted);font-size:10px;line-height:1.4}
.raci-legend span{display:inline-flex;align-items:center;gap:4px}