.crochet-project-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1rem 0; }
.crochet-project-header h2 { margin:0 0 .4rem; }
.crochet-project-header p { margin:.3rem 0 .6rem; }
.crochet-project-header > div { min-width:0; overflow-wrap:anywhere; }
.crochet-project-thumb { display:flex; align-items:center; justify-content:center; flex:0 0 100px; width:100px; height:100px; border:1px solid var(--border); border-radius:12px; padding:6px; background:var(--panel); }
.crochet-project-thumb canvas { display:block; max-width:100%; max-height:100%; width:auto; height:auto; image-rendering:pixelated; }
.crochet-chart-controls { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.crochet-chart > .file-actions { display:flex; flex-wrap:wrap; margin-block:.6rem; }
.crochet-chart .number-help > summary { padding-block:.3rem; min-height:32px; }
.crochet-chart .output-brand .brand-mark { width:80px; flex-basis:80px; }
.crochet-chart-controls .number-field { max-width:12rem; }
.crochet-marker-choice { display:flex; align-items:center; gap:.4rem; }
.crochet-marker-choice input { width:18px; height:18px; }
.crochet-chart-viewport { position:relative; overflow:auto; width:100%; height:min(60svh,560px); min-height:220px; background:white; border:2px solid var(--border); border-radius:8px; overscroll-behavior:contain; touch-action:none; }
.crochet-chart-stage { position:relative; }
.crochet-chart-stage canvas { display:block; position:sticky; top:0; left:0; max-width:none; }
.crochet-row-band, .crochet-column-band { position:absolute; pointer-events:none; box-sizing:border-box; box-shadow:0 0 0 1px white; }
.crochet-row-band { background:rgba(255,219,0,.22); outline:2px solid #786100; outline-offset:-1px; }
.crochet-column-band { background:rgba(0,155,158,.18); outline:2px solid #00696b; outline-offset:-1px; }
.crochet-row-actions { position:relative; flex-wrap:wrap; }
.crochet-time > summary > span { display:inline-flex; align-items:center; gap:.6rem; margin-left:1rem; }
.crochet-pattern-page { max-width:1100px; margin-inline:auto; }
@media (max-width:520px) {
    .crochet-project-thumb { flex-basis:76px; width:76px; height:76px; }
    .crochet-chart-controls { gap:.35rem; }
    .crochet-chart-controls .number-field { max-width:10rem; }
    .crochet-chart-viewport { height:48svh; }
}