/* A compact workshop: module list, pixel canvas and brush inspector. */
#levels [hidden] { display: none !important; }
/* Let the existing mobile shell shrink around the workshop and scrolling nav. */
.app-shell > main, .app-shell > .sidebar { min-width: 0; }
.level-view-switch, .map-actions, .map-tools, .map-history, .map-view-options { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.level-view-switch { margin: 0 0 1rem; }
#levels button, #levels input, #levels select { font: inherit; }
#levels button, .map-import { min-height: 36px; }
#levels button[aria-pressed="true"], #levels button[aria-current="true"] { border-color: var(--cyan); color: var(--cyan); background: #16303a; }
#levels .map-tools button, #levels .map-history button, #levels .map-actions button, .level-view-switch button, #cell-paint, #cell-pick {
  padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--text); cursor: pointer; font-size: .875rem;
}
#levels button:disabled { cursor: not-allowed; opacity: .45; }
#levels button:focus-visible, #levels input:focus-visible, #levels select:focus-visible, #level-canvas:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.level-workspace { display: grid; grid-template-columns: 190px minmax(280px, 1fr) 230px; gap: 1rem; align-items: start; }
.map-nav, .map-inspector { min-width: 0; padding: 1rem; }
.map-nav h3, .map-inspector h3 { margin: 0 0 .75rem; font-size: 1rem; }
.map-nav input { width: 100%; margin: .5rem 0 .75rem; }
.map-nav input, .map-cell-coordinates input { padding: .5rem; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--text); }
.map-module-list { max-height: 640px; overflow-y: auto; display: grid; gap: .25rem; }
.map-module-list button { display: grid; grid-template-columns: 1.2rem 1fr; gap: .25rem .5rem; text-align: left; padding: .65rem .5rem; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--text); cursor: pointer; }
.map-module-list button span { font-size: .8rem; line-height: 1.4; }
.map-changed { grid-column: 2; color: var(--yellow); font-size: .75rem; }
.map-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
.map-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: .6rem; }
.map-heading h3 { font-size: 1.1rem; margin: 0; }
.map-heading p, .map-caption, .map-status, #level-tool-help, #level-notice { margin: .3rem 0; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.map-toolbar { padding: .8rem; display: grid; gap: .7rem; }
.map-actions { justify-content: flex-end; }
.map-import { display: inline-flex; align-items: center; padding: .5rem .7rem; color: var(--text); border: 1px solid var(--line); border-radius: 5px; font-size: .875rem; cursor: pointer; background: var(--panel); }
.map-import:focus-within { outline: 2px solid var(--cyan); }
.map-import input { width: 1px; height: 1px; opacity: 0; position: absolute; }
.map-view-options label { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .875rem; }
#levels input[type="checkbox"] { width: auto; margin: 0; }
.map-view-options select, #level-layer { padding: .35rem; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 4px; }
.map-frame { width: 664px; max-width: 100%; padding: 0; border: 12px solid #000; background: #000; box-sizing: border-box; }
.map-canvas-stack { position: relative; width: 100%; aspect-ratio: 8 / 5; }
#level-canvas, #level-overlay { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
#level-canvas { touch-action: none; cursor: crosshair; }
#level-overlay { position: absolute; inset: 0; pointer-events: none; }
.map-inspector { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.map-inspector label, .map-nav label { display: block; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.map-brush { display: flex; align-items: center; gap: .8rem; }
#level-brush { width: 56px; height: 56px; image-rendering: pixelated; border: 1px solid var(--line); }
.map-brush strong, .map-brush span { display: block; font-size: .875rem; }
.map-brush span { color: var(--muted); margin-top: .4rem; }
.map-colours { display: grid; grid-template-columns: repeat(8, 1fr); gap: .35rem; }
#levels .map-colours button { min-height: 24px; aspect-ratio: 1; padding: 0; border: 2px solid #ffffff50; border-radius: 3px; cursor: pointer; }
#levels .map-colours button[aria-pressed="true"] { outline: 2px solid var(--cyan); outline-offset: 2px; }
.tile-palette { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .3rem; max-height: 290px; overflow-y: auto; margin-top: .5rem; }
.tile-palette button { display: grid; justify-items: center; gap: .25rem; padding: .35rem .1rem; border: 1px solid var(--line); background: #0b1018; border-radius: 3px; color: var(--muted); cursor: pointer; }
.tile-palette canvas { width: 24px; height: 24px; image-rendering: pixelated; }
.tile-palette span { font: .75rem var(--mono); }
.map-cell-coordinates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.map-cell-coordinates input { width: 100%; }
#cell-bytes { font: .8rem var(--mono); color: var(--muted); margin: .7rem 0; }
.map-limits, .map-reference { padding: 1rem; }
.map-limits p { font-size: .875rem; color: var(--muted); line-height: 1.6; margin: .4rem 0 0; }
.map-reference summary { cursor: pointer; font-size: .875rem; color: var(--text); }
#level-reference { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .75rem; }
.map-status { margin: .5rem 0 1rem; }
@media (max-width: 1100px) { .level-workspace { grid-template-columns: 170px minmax(260px, 1fr); } .map-inspector { grid-column: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); } .map-nav { grid-row: 1 / 3; } }
@media (max-width: 850px) { .level-workspace { grid-template-columns: minmax(0, 1fr); } .map-nav, .map-inspector { grid-column: 1; grid-row: auto; } .map-module-list { max-height: 160px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .map-nav { padding: .7rem; } }
@media (max-width: 440px) { .map-inspector { grid-template-columns: 1fr; } #level-reference { grid-template-columns: 1fr; } }