.canvas-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 6px 16px; padding: 8px 12px; border-bottom: 1px solid var(--soft-border); background: var(--panel); }
.canvas-toolbar .view-toolbar { order: 2; flex: 1 1 auto; padding: 0; border: 0; flex-wrap: wrap; gap: 6px; }
.canvas-toolbar .drawing-colors { margin: 6px 0; }
.canvas-toolbar .icon-action, .expanded-actions .action-btn { padding: 8px; min-width: 44px; }
.yarn-palette { flex: 1 1 250px; align-items: center; }
.yarn-palette .drawing-color { gap: 10px; }
.yarn-palette .pattern-color-field { display: contents; }
.yarn-palette .pattern-color-edit { display: flex; flex: 1 1 100%; gap: 10px; padding: 12px; background: var(--surface); }
.yarn-palette .pattern-color-edit label { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.editor-view-tabs { display: flex; gap: 4px; padding: 10px 12px 0; background: var(--panel); border-bottom: 1px solid var(--border); }
.editor-view-tabs button { flex: 0 1 auto; min-height: 44px; padding: 8px 16px; border-radius: 8px 8px 0 0; margin-bottom: -1px; }
.editor-view-tabs button[aria-selected="true"] { background: var(--surface); border-color: var(--border); border-bottom-color: var(--surface); color: var(--text); box-shadow: inset 0 3px var(--accent); }
.editor-view-tabs + .canvas-viewport { border-top: 0; background: var(--surface); }
.canvas-toolbar .setup-fields { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.canvas-toolbar .setup-fields label { min-width: 120px; }
.drawing-tools, .drawing-tools .editor-toolbar, .drawing-tools .tool-preferences { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.drawing-tools .tool-preferences { margin: 0; }
.drawing-tools .tool-preferences label { display: flex; align-items: center; gap: .5rem; margin: 0; }
.drawing-tools { position: relative; }
.drawing-tool-help { position: relative; }
.drawing-tool-help[open] { position: absolute; left: 0; top: 100%; z-index: 15; background: var(--panel); border: 1px solid var(--border); padding: 12px; width: min(420px, 75vw); max-height: 45vh; overflow: auto; }
.trim-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; order: 3; }
.trim-actions button { padding: 6px 12px; }
.trim-actions button[aria-pressed="true"] { border-color: var(--accent); background: var(--glow); }
.editor-page .canvas-viewport { display: flex; touch-action: none; height: 65svh; min-height: 240px; max-height: none; box-sizing: border-box; padding: 8px; }
.editor-page .canvas-viewport canvas { display: block; flex: 0 0 auto; margin: auto; }
.grid-trim, .drawing-area > .mosaic-controls { padding: 16px; border-top: 1px solid var(--soft-border); }
.workspace-toggle { display: none; }
.mirror-picker { position: relative; }
.mirror-options { position: absolute; top: 100%; left: 0; z-index: 30; display: grid; gap: 4px; width: 190px; padding: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 12px #0004; }
.mouse-panning, .mouse-panning canvas { cursor: grabbing; }
html.editor-expanded { overflow: hidden; }
.expanded-editor { position: fixed; inset: 0; z-index: 45; background: var(--surface); display: flex; flex-direction: column; border-radius: 0; overflow: auto; }
.expanded-editor .grid-caption { display: none; }
.expanded-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; justify-content: flex-end; padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 6px max(6px, env(safe-area-inset-left)); position: sticky; top: 0; background: var(--panel); z-index: 32; }
.expanded-actions .wizard-next { margin-right: auto; }
.expanded-editor .canvas-toolbar { flex: 0 0 auto; box-shadow: 0 4px 10px #0003; }
.editor-page .expanded-editor .canvas-viewport { height: auto; flex: 1 0 35svh; min-height: 0; }
.expanded-editor > :not(.canvas-toolbar):not(.canvas-viewport):not(.editor-view-panel):not(.editor-view-tabs):not(.expanded-actions):not(.grid-trim):not(.chart-clipboard):not(.mosaic-check):not(.output-brand):not(.issue-notice) { display: none; }
.expanded-editor .editor-view-tabs { flex: 0 0 auto; }
.expanded-editor .output-brand { flex: 0 0 auto; margin: 0; padding: 4px; }
.expanded-editor .output-brand svg { max-height: 40px; }
.expanded-editor.toolbar-closed .canvas-toolbar { display: none; }
.swipe-site-actions { position: fixed; right: max(.5rem,env(safe-area-inset-right)); top: max(.5rem,env(safe-area-inset-top)); z-index: 23; display: flex; gap: 8px; }
.swipe-site-actions .swipe-site-menu { position: static; }
.swipe-site-actions button { background: var(--surface); box-shadow: 0 1px 8px #0004; }
.picture-workspace { min-width: 0; }
.workflow-mode { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.picture-workspace.simple-picture { display: block; }
.simple-picture .picture-settings > summary { display: none; }
.simple-picture .image-options { max-width: 700px; }
.size-guide { margin-top: 16px; }
.size-guide > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; }
.picture-stage { min-width: 0; }
.picture-stage > .instruction-help { margin: 0; }
.picture-views { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; }
.picture-views button[aria-pressed="true"] { border-color: var(--accent); background: var(--glow); }
.picture-stage figure { margin: 0; }
.picture-stage .image-preview { display: block; }
.picture-stage .image-preview canvas { width: 100%; height: auto; max-width: 100%; max-height: 65svh; object-fit: contain; margin: auto; }
.library-preview { display: block; width: min(100%, 240px); padding: 8px; margin-bottom: 12px; }
.library-preview canvas { width: 100%; height: 160px; object-fit: contain; image-rendering: pixelated; background: transparent; border: 0; margin-top: 0; }
.library-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; margin-block: 20px; }
.library-grid .library-card { min-width: 0; margin: 0; padding: 16px; }
.library-card h2 { font-size: 1.2rem; overflow-wrap: anywhere; }
.library-card .library-preview { width: 100%; padding: 0; }
.library-card .file-actions { gap: 8px; flex-wrap: wrap; }
.library-card .action-btn { padding: 8px; min-height: 44px; }
.library-more { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 8px; overflow-wrap: anywhere; }
@media (min-width: 48rem) { .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
    .workspace-toggle { display: inline-flex; }
    .large-workspace { max-width: none; width: 100%; margin-top: 4px; padding-top: 0; }
    .site-shell:has(.large-workspace) { max-width: none; padding-top: 8px; }
    .site-shell:has(.large-workspace) .site-header { grid-template-columns: 150px 1fr auto; padding-block: 8px; gap: 16px; }
    .site-shell:has(.large-workspace) .brand { width: 110px; }
    .site-shell:has(.large-workspace) .brand-area { max-width: 150px; }
    .site-shell:has(.large-workspace) .brand-area .brand-attribution { display: none; }
    .large-workspace .editor-heading { margin-bottom: 8px; }
    .large-workspace .editor-heading h1 { font-size: 1.5rem; }
    .large-workspace .wizard-toolbar { padding: 6px 12px; }
    .large-workspace .wizard-tabs { margin: 8px 0 0; }
    .large-workspace .wizard-tabs button { padding: 6px; }
    .large-workspace .wizard-section { padding: 8px; }
    .large-workspace .grid-caption { padding: 6px 12px; }
    .large-workspace .drawing-area { scroll-margin-top: 110px; }
    .large-workspace .canvas-viewport { height: max(320px, calc(100svh - var(--canvas-top, 260px) - 16px)); }
    .large-workspace .picture-workspace { display: block; }
    .large-workspace .picture-workspace.simple-picture { display: block; }
    .large-workspace .picture-stage { min-height: 55svh; }
    .large-workspace .picture-stage .crop-viewport { max-height: 65svh; }
    .large-workspace .picture-stage .image-preview canvas { height: auto; max-height: 65svh; }
}
@media (max-width: 48rem) {
    .site-shell:has(.editor-page) { padding-inline: 8px; }
    .editor-page .wizard-section[aria-label="Editor"] { padding: 0; }
    .canvas-toolbar { padding: 8px; }
    .canvas-toolbar .yarn-palette { margin: 0; }
    .editor-page .canvas-viewport { padding: 4px; }
    .editor-page .grid-caption { padding: 8px; }
    .drawing-tools .tool-preferences label { flex-wrap: wrap; }
    .canvas-toolbar .view-toolbar { justify-content: start; }
}

.stitch-tools { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.stitch-tools button { min-height:44px; padding:8px; }
.crochet-comparison { width:100%; table-layout:fixed; border-collapse:collapse; margin:1rem 0; }
.crochet-comparison th,.crochet-comparison td { text-align:left; vertical-align:top; padding:.5rem; overflow-wrap:anywhere; border-bottom:1px solid var(--border); }
.crochet-comparison th:first-child { width:28%; }

.stitch-correction { width:100%; max-width:40rem; margin:1rem auto; padding:1.25rem; box-sizing:border-box; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.stitch-correction input[type="range"] { display:block; width:100%; min-height:44px; padding:0; }
.correction-scale { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: .5rem; }
.correction-end { display: grid; justify-items: start; gap: .35rem; text-align: left; font-size: .85rem; }
.correction-end:nth-child(2) { justify-items: end; text-align: right; }
.correction-scale input { grid-column: 1 / -1; }
.correction-end canvas { width: 32px; height: 32px; }
.stitch-correction > .field-hint { margin: .75rem 0 0; text-align: center; }

.editor-view-panel { min-width: 0; }
.editor-page .editor-view-panel .canvas-viewport[hidden], .canvas-toolbar[hidden] { display: none; }
.expanded-editor .editor-view-panel { display: flex; flex-direction: column; flex: 1 0 35svh; min-height: 0; }
.expanded-editor .editor-view-panel .canvas-viewport { min-height: 35svh; }
.simple-wizard .canvas-toolbar .zoom-value { display: none; }
.editor-view-tabs { flex-wrap: wrap; }
.editor-page .canvas-toolbar:has(.grid-text-dialog) { z-index: 1001; }
@media (max-width: 48rem) { .editor-view-tabs button { flex: 1; padding-inline: 7px; font-size: .85rem; } }

.editor-view-options { margin: 0; padding: 0; border: 0; }
.editor-view-options > summary { min-height: 44px; padding: 10px; cursor: pointer; box-sizing: border-box; }

.editor-grid-layout { min-width: 0; }
.band-tools { padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); min-width: 0; }
.band-tools details > * { margin-bottom: 10px; }
.band-tools label, .band-select-controls { display: grid; gap: 8px; }
.band-tools .number-entry input { min-width: 0; width: 100%; }
@media (min-width: 80rem) { .editor-grid-layout.with-band-tools { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 12px; align-items: start; } }

.band-header-navigation { display:flex; gap:.3rem; align-items:center; grid-column:1/-1; }
.band-header-navigation button:nth-child(2) { flex:1; }

@media (max-width:48rem) {
    .editor-page .canvas-viewport { height:65svh; min-height:240px; }
    .editor-page .canvas-toolbar { position:sticky; bottom:env(safe-area-inset-bottom,0px); z-index:7; display:flex; align-items:stretch; gap:4px; max-height:34svh; overflow-y:auto; overscroll-behavior:contain; padding:6px 8px max(8px,env(safe-area-inset-bottom,0px)); border:1px solid var(--border); background:var(--panel); box-shadow:0 -4px 12px #0002; }
    .editor-page .canvas-toolbar .yarn-palette { display:flex; flex:1 1 100%; flex-wrap:nowrap; gap:6px; overflow-x:auto; overflow-y:hidden; padding:6px 4px 10px; margin:0; scroll-snap-type:x proximity; }
    .editor-page .canvas-toolbar .yarn-palette .drawing-color { flex:0 0 auto; min-width:44px; min-height:44px; scroll-snap-align:start; }
    .editor-page .canvas-toolbar .view-toolbar { flex:1 1 100%; width:100%; gap:4px; padding:4px 0; }
    .editor-page .canvas-toolbar .drawing-tools { flex:1 1 auto; min-width:0; }
    .editor-page .canvas-toolbar .drawing-tools .editor-toolbar { margin:0; }
    .editor-page .canvas-toolbar .history-controls { margin-left:auto; }
    .editor-page .canvas-toolbar > details { flex:1 1 100%; }
    .editor-page .canvas-toolbar > details > summary { display:flex; align-items:center; min-height:44px; }
    .editor-page .editor-view-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; padding:4px 4px 0; }
    .editor-page .editor-view-tabs button { min-width:0; padding-inline:4px; white-space:normal; }
    .expanded-editor .canvas-toolbar { flex:0 0 auto; }
}

.pattern-color-edit.shade-panel {
    position: fixed;
    z-index: 1100;
    top: 12svh;
    left: 50%;
    transform: translateX(-50%);
    width: min(34rem, calc(100vw - 24px));
    max-height: 76svh;
    overflow: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px;
    background: var(--surface);
    box-shadow: 0 8px 32px #0005;
}
.shade-preview, .shade-picker, .shade-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.shade-preview .yarn-swatch { width: 44px; height: 44px; }
.pattern-color-edit.shade-panel .shade-field { display: grid; gap: 8px; }
.shade-family { width: 100%; min-height: 44px; }
.shade-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.shade-choices .shade-choice { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px; text-align: left; white-space: normal; }
.shade-choice[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }
.yarn-swatch { flex-shrink: 0; }
.shade-picker input { min-width: 64px; min-height: 44px; }
.shade-panel .pattern-color-input { width: 8rem; min-height: 44px; }
.shade-actions button { min-height: 44px; }
@media (max-width: 48rem) {
    .pattern-color-edit.shade-panel { top: 8svh; max-height: 84svh; padding: 12px; }
    .shade-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shade-actions { position: sticky; bottom: 0; padding: 8px 0; background: var(--surface); }
    .shade-actions button { flex: 1; }
}