/* Standalone authoring-tool layout; it is intentionally not part of the game stylesheet or bundle. */
:root { color-scheme: dark; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #0b0d1a; color: #edf1ff; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; padding: 14px; }
h1, h2, p { margin-top: 0; }
h1 { color: #ff68ad; }
h2 { font-size: 16px; color: #77e8ff; }
main { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; height: calc( 100vh - 28px ); }
main.sidebar-collapsed { grid-template-columns: minmax(0, 1fr) 42px; }
.workspace, aside section { background: #14182b; border: 1px solid #30395e; border-radius: 8px; padding: 14px; }
.workspace { display: flex; flex-direction: column; min-height: 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tool-group { display: flex; gap: 4px; padding-right: 8px; border-right: 1px solid #46517d; }
.tool-group:last-child { padding-right: 0; border-right: 0; }
.tool-icon { width: 34px; height: 34px; padding: 0; font-size: 18px; line-height: 1; }
.colour-palette { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 12px; }
.colour-palette button { width: 28px; height: 28px; padding: 0; }
.colour-palette button[data-colour="0"] { background: #416f9a; }
.colour-palette button[data-colour="1"] { background: #8756a5; }
.colour-palette button[data-colour="2"] { background: #2f918a; }
.colour-palette button[data-colour="3"] { background: #8b7b32; }
.colour-palette button[data-colour="4"] { background: #a35348; }
.colour-palette button[data-colour="5"] { background: #7ed0c6; }
.colour-palette button[data-colour="6"] { background: #ff5b75; }
.colour-palette button[data-colour="7"] { background: #ff9f43; }
.colour-palette button[data-colour="8"] { background: #ffe55c; }
.colour-palette button[data-colour="9"] { background: #7ee787; }
.colour-palette button[data-colour="10"] { background: #68c7ff; }
.colour-palette button[data-colour="11"] { background: #7c8cff; }
.colour-palette button[data-colour="12"] { background: #d887ff; }
.colour-palette button.is-selected { border: 2px solid #ffe55c; box-shadow: 0 0 0 1px #0b0d1a; }
button, input, textarea { font: inherit; border: 1px solid #46517d; border-radius: 4px; background: #0c1020; color: #edf1ff; padding: 8px; }
button { cursor: pointer; }
button:hover, button.is-selected { background: #27365f; border-color: #77e8ff; }
/* Export is the editor's main hand-off action, so it is easy to find and safely click. */
#copy-export { width: 100%; padding: 13px; font-weight: 700; font-size: 15px; color: #0b0d1a; background: #77e8ff; border-color: #a7f2ff; }
#copy-export:hover { background: #a7f2ff; border-color: #ffffff; }
/* The print image is a secondary export: present, but clearly less prominent than level data. */
.print-export { width: 100%; margin-top: 8px; font-size: 12px; }
/* The destructive reset is deliberately quiet and isolated at the base of the Settings panel. */
.clear-level-panel { margin-top: auto; text-align: center; }
button.danger-link { padding: 2px; border: 0; border-radius: 0; background: transparent; color: #c57c98; font-size: 11px; text-decoration: underline; }
button.danger-link:hover { background: transparent; border-color: transparent; color: #ff9abf; }
canvas { display: block; width: 100%; height: 100%; min-height: 0; flex: 1; background: #101124; border: 1px solid #46517d; cursor: crosshair; touch-action: none; }
/* A column layout lets the separated reset control sit at the very bottom of the sidebar. */
aside { display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-height: 0; }
.sidebar-toggle { min-height: 42px; padding: 6px; font-size: 16px; }
main.sidebar-collapsed aside > :not( .sidebar-toggle ) { display: none; }
.sidebar-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.sidebar-tabs button { padding: 8px 4px; }
.object-list { display: grid; gap: 4px; max-height: min( 48vh, 440px ); overflow-y: auto; margin: 10px 0; }
.object-row { display: flex; align-items: center; gap: 7px; width: 100%; padding: 7px; text-align: left; font-size: 12px; }
.object-colour { width: 11px; height: 11px; flex: 0 0 auto; border-radius: 50%; border: 1px solid #edf1ff; }
.object-row small { margin-left: auto; color: #b5bdd8; }
.layer-controls { display: grid; grid-template-columns: 1.4fr .6fr .6fr 1.4fr; gap: 4px; }
.layer-controls button { padding: 7px 4px; font-size: 11px; }
.object-properties { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #30395e; }
.object-properties h3 { margin: 0; font-size: 13px; color: #77e8ff; }
.object-properties label { margin: 0; font-size: 12px; }
.object-properties .hint { margin: 0; }
.property-palette { margin: 0; }
button:disabled { cursor: default; opacity: .45; }
.level-list { display: grid; gap: 6px; max-height: 190px; overflow-y: auto; margin-bottom: 10px; }
.level-list button { text-align: left; font-size: 12px; }
label { display: grid; gap: 5px; margin: 9px 0; }
textarea { width: 100%; resize: vertical; margin: 8px 0; }
.status { min-height: 1.3em; margin: 12px 0 5px; color: #77e8ff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect( 0, 0, 0, 0 ); white-space: nowrap; border: 0; }
.hint { color: #b5bdd8; font-size: 13px; line-height: 1.45; }
.recovery { background: #14182b; border: 1px solid #30395e; border-radius: 8px; padding: 14px; }
.recovery summary { cursor: pointer; color: #b5bdd8; }
.recovery[open] summary { margin-bottom: 12px; color: #77e8ff; }
code { color: #ffe55c; }
@media ( max-width: 1000px ) { main { grid-template-columns: 1fr; height: auto; } canvas { min-height: 65vh; } }