/* Component: Primary canvas row and slots */
.primary-canvas-row.single { position: relative;  height: 100%; background: var(--pfse-surface-secondary); border: 1px solid var(--pfse-border-primary); }
.primary-canvas-row.two-up { display: flex; gap: var(--pfse-spacing-3); height: 100%; }
.canvas-loading-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--pfse-spacing-2); background: color-mix(in srgb, var(--pfse-surface-secondary) 78%, transparent); color: var(--pfse-text-high); z-index: 20; pointer-events: none; font-weight: 600; }
.canvas-loading-overlay .spinner { width: 20px; height: 20px; border-width: 2px; }
.canvas-loading-overlay .loading-label { font-size: 0.95rem; }
.canvas-slot { flex: 1; height: 100%; background: #fff; border: 1px solid var(--pfse-border-primary); outline: none; padding: var(--pfse-spacing-4); box-sizing: border-box; }

.canvas-slot.fit { display: grid; place-items: center; }
.canvas-slot.overflow { display: block; overflow: auto; }

.canvas-slot > img,
.canvas-slot > canvas { max-width: none; max-height: none; display: block; }
.canvas-slot.previous { background: var(--pfse-surface-secondary); }
.canvas-slot.bg-dark { background: #000; color: var(--pfse-text-high); }
.canvas-image.rounded { border-radius: 50%; }

/* Image size select label */
.image-size-group { display: inline-flex; flex-direction: column; gap: var(--pfse-spacing-1); align-items: flex-start; }
.image-size-label { font-size: var(--pfse-font-size-sm); color: var(--pfse-text-muted); font-weight: 500; letter-spacing: 0.5px; }

/* Simple toggle button styles for canvas shape (UI-only) */
.toggle-group { display: inline-flex; gap: 0; align-items: center; border: 1px solid var(--pfse-border-secondary); border-radius: var(--pfse-radius-sm); padding: 2px; background: var(--pfse-surface-primary); }
.icon-btn { background: transparent; border: 1px solid transparent; padding: 6px 8px; font-size: 14px; cursor: pointer; color: var(--pfse-text-high); border-radius: var(--pfse-radius-xs); transition: background var(--pfse-anim-micro) var(--pfse-ease-standard), border-color var(--pfse-anim-micro) var(--pfse-ease-standard), color var(--pfse-anim-micro) var(--pfse-ease-standard); }
.icon-btn:hover { background: color-mix(in srgb, var(--pfse-accent-primary) 8%, var(--pfse-surface-primary) 92%); border-color: var(--pfse-border-primary); }
.icon-btn[aria-pressed="true"] { border-color: var(--pfse-accent-primary); background: color-mix(in srgb, var(--pfse-accent-primary) 16%, var(--pfse-surface-primary) 84%); color: var(--pfse-accent-primary); font-weight: 600; }
.icon-btn:focus { outline: 2px solid var(--pfse-focus-ring-color); outline-offset: 1px; }