#page-map-editor {
    --bg:        #2b2b2b;  /* recessed list/field backing (Hierarchy/Project/text fields) */
    --panel:     #383838;  /* dock / window background */
    --panel-2:   #3c3c3c;  /* control body, tabs, buttons */
    --panel-3:   #4a4a4a;  /* component-bar header strip / unfocused selection gray */
    --border:    #232323;  /* near-black 1px dividers between every dock region */
    --text:      #c4c4c4;  /* default light-gray text (NOT white) */
    --muted:     #8c8c8c;  /* dimmed / secondary text */
    --accent:    #3d6e9e;  /* Unity selection BLUE (focused). ~#2C5D87 family, slightly brighter for hover */
    --accent-sel:#2c5d87;  /* focused selection-row blue */
    --accent-2:  #2c5d87;  /* REPOINT old green selection to the same blue (no more green rows) */
    --danger:    #c14545;
    --warn:      #c08a3c;
    --toolbar:   #393939;  /* toolbar background */
    --tab-strip: #2b2b2b;  /* tab strip backing */
}#page-map-editor {
    /* layout sizes — driven by dock.js / persisted via prefs.js */
    --col-left: 232px;
    --col-right: 288px;
    --row-bottom: 232px;
    /* splitters */
    --splitter-hit: 6px;
    --splitter-hot: var(--accent);
    /* accessibility */
    --ui-scale: 1;                 /* 0.85..1.5 */
    --focus-ring: 2px solid var(--accent);
    --focus-offset: 2px;
    /* pills / tooltips / sections */
    --pill-bg: var(--panel-2);
    --pill-text: var(--text);
    --tip-bg: #0d0f12;
    --tip-text: #e6e6e6;
    --section-head: var(--panel-3);
    /* REALM COLOR MAP (plan §4) */
    --realm-earth:#6FAE5A; --realm-dungeon:#9B8CFF; --realm-water:#3FA9D6; --realm-heavenly:#E8C65A;
    --realm-infernal:#E06B4B; --realm-shadow:#8A8FA8; --realm-dream:#D98FD0; --realm-ice:#7FD4E8;
    --realm-desert:#D6A85A; --realm-mechanical:#9AA6AD; --realm-dragon:#C8553D; --realm-misc:#8C8C8C;
}#page-map-editor { font-size: calc(13px * var(--ui-scale)); }#page-map-editor * { box-sizing: border-box; }#page-map-editor, #page-map-editor {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13px;
    overflow: hidden;
}#page-map-editor #topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    background: var(--toolbar);
    border-bottom: 1px solid var(--border);
    height: 34px;
}#page-map-editor .brand {
    font-weight: 700;
    color: var(--text);
    margin-right: 8px;
    white-space: nowrap;
}#page-map-editor #topbar .btn-compile {
    background: #1f7a3f;
    border-color: #2faa5a;
    color: #eafff0;
    font-weight: 600;
}#page-map-editor #topbar .btn-compile:hover { background: #259049; }#page-map-editor #topbar .btn-compile:active { background: #1a6a37; }#page-map-editor .namefield {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
}#page-map-editor .namefield span { color: var(--muted); font-size: 12px; }#page-map-editor .namefield input { width: 180px; }#page-map-editor .namefield input[type="checkbox"] { width: auto; }#page-map-editor .biome-label {
    color: var(--muted);
    font-size: 12px;
    font-family: ui-monospace, monospace;
}#page-map-editor .status {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}#page-map-editor /* Editor build version — pinned to the bottom-right corner of the editor (#app is position:relative, #page-map-editor set by dock.js). Advances on every Compile → Live. Non-interactive so it never blocks clicks. */
.editor-version {
    position: absolute;
    right: 6px;
    bottom: 4px;
    z-index: 60;
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: var(--muted);
    opacity: 0.75;
    pointer-events: none;
    user-select: none;
}#page-map-editor #app {
    display: grid;
    grid-template-columns: var(--col-left) minmax(0, 1fr) var(--col-right);
    grid-template-rows: minmax(0, 1fr) var(--row-bottom);
    grid-template-areas:
        "hierarchy viewport inspector"
        "project   project  inspector";
    gap: 1px;                       /* the gap shows --border behind = Unity 1px splitter look */
    background: var(--border);       /* gap/divider color (#232323) */
    height: calc(100% - 34px);       /* tied to #topbar height; build.py overrides to height:auto in embed */
    min-height: 0;
    position: relative;              /* containing block for the absolutely-positioned splitter handles */
}#page-map-editor #left-panel { grid-area: hierarchy; }#page-map-editor #canvas-wrap { grid-area: viewport;  }#page-map-editor #right-panel { grid-area: inspector; }#page-map-editor #project-dock { grid-area: project;   }#page-map-editor .dock {
    background: var(--panel);
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}#page-map-editor .dock-bottom { min-height: 0; }#page-map-editor .pane-tabstrip {
    display: flex;
    align-items: stretch;
    gap: 0;
    height: 22px;
    flex: 0 0 22px;
    background: var(--tab-strip);
    border-bottom: 1px solid var(--border);
}#page-map-editor .pane-tab {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    height: 22px;
    font-size: 11px;
    color: var(--muted);
    background: transparent;
    border: none;
    border-right: 1px solid var(--border);
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
}#page-map-editor .pane-tab:hover { color: var(--text); }#page-map-editor .pane-tab.active {
    color: var(--text);
    background: var(--panel-2);                 /* active tab slightly lighter/raised */
    box-shadow: inset 0 -2px 0 var(--accent);   /* thin selection-blue underline */
}#page-map-editor .pane-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
}#page-map-editor .pane-filter {
    width: 100%;
    margin-bottom: 8px;
    padding: 5px 7px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
}#page-map-editor .pane-filter:focus { outline: none; border-color: var(--accent); }#page-map-editor .proj-body { padding: 8px; display: flex; flex-direction: column; }#page-map-editor .proj-tabpane { display: none; }#page-map-editor .proj-tabpane.active { display: block; }#page-map-editor .proj-tabpane[data-proj-pane="palette"].active, #page-map-editor .proj-tabpane[data-proj-pane="find"].active {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
}#page-map-editor .tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }#page-map-editor .tab {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--panel-2);
}#page-map-editor .tab.active { background: var(--accent); color: var(--text); }#page-map-editor .palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 32px);
    gap: 2px;
    background: var(--bg);
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    max-height: 168px;          /* compact fallback (also caps the recents/favorites pal-strips) */
    overflow-y: auto;
}#page-map-editor /* Only the MAIN palette grid fills the dock's available height; the recents/favorites strips
   reuse .palette-grid (via JS) but must stay compact, #page-map-editor so override by id, #page-map-editor not class. */
#palette-grid { flex: 1 1 0; min-height: 0; max-height: none; }#page-map-editor .ptile {
    cursor: pointer;
    border: 1px solid transparent;
}#page-map-editor .ptile:hover { border-color: var(--accent); }#page-map-editor .ptile.selected { border-color: var(--accent); outline: 1px solid var(--accent); }#page-map-editor .hint { color: var(--muted); font-size: 11px; margin-top: 8px; }#page-map-editor #place-search:focus { outline: none; border-color: var(--accent); }#page-map-editor .place-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }#page-map-editor .place-chip {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    cursor: pointer;
}#page-map-editor .place-chip:hover { border-color: var(--accent); }#page-map-editor .place-chip.active { background: var(--accent); color: var(--text); border-color: var(--accent); }#page-map-editor .place-chip .chip-count { opacity: 0.6; margin-left: 3px; }#page-map-editor .place-results {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 0;                 /* fill the dock height so more results show when it's taller */
    min-height: 0;
    overflow-y: auto;
}#page-map-editor .place-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    background: var(--bg);
}#page-map-editor .place-row:hover { border-color: var(--accent); background: var(--panel-2); }#page-map-editor .place-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    image-rendering: pixelated;
    background: #000;
    border-radius: 3px;
}#page-map-editor .place-glyph {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #06121a;
    border-radius: 3px;
}#page-map-editor .place-label {
    flex: 1 1 auto;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}#page-map-editor .place-tag {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    flex: 0 0 auto;
}#page-map-editor #canvas-wrap {
    position: relative;
    background: #1e1e1e;          /* Unity scene bg is darker */
    overflow: hidden;
}#page-map-editor #zone-canvas {
    display: block;
    image-rendering: pixelated;
    cursor: crosshair;
}#page-map-editor .canvas-help {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.55);
    color: var(--muted);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 6px;
    pointer-events: none;
}#page-map-editor #nav-controls {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 5px;
    background: rgba(21, 23, 28, 0.92);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.45);
    z-index: 5;
}#page-map-editor .nav-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    color: var(--text);
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 6px;
}#page-map-editor .nav-btn:hover { border-color: var(--accent); color: var(--accent); }#page-map-editor .nav-btn.active { background: var(--accent); color: var(--text); border-color: var(--accent); }#page-map-editor .nav-btn svg { width: 18px; height: 18px; display: block; }#page-map-editor .nav-btn-text { font-size: 12px; font-weight: 700; font-family: ui-monospace, monospace; }#page-map-editor #nav-zoom-label {
    text-align: center;
    font-size: 11px;
    font-family: ui-monospace, monospace;
    color: var(--muted);
    padding: 2px 0 1px;
    min-width: 34px;
    user-select: none;
}#page-map-editor .hierarchy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 8px;
    max-height: none;            /* fill the left dock, not a fixed 360px box */
    flex: 1 1 auto;
    overflow-y: auto;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px;
    user-select: none;
}#page-map-editor .hier-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 17px;                /* was 24px; Unity rows ~16-18px */
    padding-right: 4px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
}#page-map-editor .hier-row:hover { background: var(--panel-2); }#page-map-editor .hier-object::before, #page-map-editor .hier-layer::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 0;
    bottom: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}#page-map-editor .hier-twisty {
    flex: 0 0 12px;
    width: 12px;
    text-align: center;
    font-size: 10px;
    color: var(--muted);
}#page-map-editor .hier-icon {
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
    font-size: 12px;
    line-height: 1;
}#page-map-editor .hier-swatch {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.4);
}#page-map-editor .hier-label {
    flex: 1 1 auto;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
}#page-map-editor .hier-meta {
    flex: 0 0 auto;
    font-size: 10px;
    color: var(--muted);
    font-family: ui-monospace, monospace;
}#page-map-editor .hier-group .hier-label { font-weight: 600; color: var(--text); }#page-map-editor .hier-group .hier-meta {
    background: var(--panel-2);
    border-radius: 999px;
    padding: 0 6px;
    min-width: 16px;
    text-align: center;
}#page-map-editor /* Subcategory header (depth 1): mid-weight, #page-map-editor dimmer than a top-level category, #page-map-editor with a quiet count pill. */
.hier-subgroup .hier-label { font-weight: 500; color: var(--muted); }#page-map-editor .hier-subgroup .hier-meta {
    background: var(--panel-2);
    border-radius: 999px;
    padding: 0 5px;
    min-width: 14px;
    text-align: center;
    opacity: 0.85;
}#page-map-editor .hier-layer.active { background: var(--accent-sel); border-color: var(--accent-sel); }#page-map-editor .hier-layer.active .hier-label { color: var(--text); font-weight: 600; }#page-map-editor .hier-object.selected { background: var(--accent-sel); border-color: var(--accent-sel); }#page-map-editor .hier-object.selected .hier-label, #page-map-editor .hier-object.selected .hier-meta { color: var(--text); }#page-map-editor .hier-hidden .hier-label, #page-map-editor .hier-hidden .hier-icon { opacity: 0.4; }#page-map-editor .hier-eye, #page-map-editor .hier-del {
    flex: 0 0 auto;
    padding: 0 4px;
    height: 18px;
    line-height: 1;
    font-size: 11px;
    background: transparent;
    border: none;
    color: var(--muted);
    opacity: 0;
    transition: opacity 0.1s;
}#page-map-editor .hier-row:hover .hier-eye, #page-map-editor .hier-row:hover .hier-del { opacity: 0.85; }#page-map-editor .hier-eye.off { opacity: 0.85; filter: grayscale(1) brightness(1.4); }#page-map-editor /* hidden: eye stays visible, #page-map-editor dimmed */
.hier-row:hover .hier-eye.off { opacity: 1; }#page-map-editor .hier-eye:hover { color: var(--accent); }#page-map-editor .hier-del:hover { color: var(--danger); }#page-map-editor .checkbox { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }#page-map-editor .tool-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 4px;
    max-width: 520px;
}#page-map-editor .tool-btn {
    padding: 7px 6px;
    border-radius: 5px;
    background: var(--panel-2);
    font-size: 12px;
}#page-map-editor .tool-btn.active { background: var(--accent); color: var(--text); font-weight: 600; }#page-map-editor .marker-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
    max-width: 760px;
}#page-map-editor .inspector h3 {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: var(--text);
    text-transform: capitalize;
}#page-map-editor .field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}#page-map-editor .field span { color: var(--muted); font-size: 12px; flex: 0 0 auto; }#page-map-editor .field input, #page-map-editor .field select { width: 130px; }#page-map-editor .muted { color: var(--muted); font-size: 12px; }#page-map-editor button {
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text);
    border-radius: 5px;
    padding: 6px 12px;
    font-size: 13px;
    transition: background 0.12s, border-color 0.12s;
}#page-map-editor button:hover { border-color: var(--accent); }#page-map-editor button.primary { background: var(--accent); color: var(--text); border-color: var(--accent); font-weight: 600; }#page-map-editor button.ghost { background: transparent; }#page-map-editor button.danger { background: transparent; color: var(--danger); border-color: var(--danger); margin-top: 10px; width: 100%; }#page-map-editor button.danger:hover { background: rgba(255,90,90,0.12); }#page-map-editor input, #page-map-editor select {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 13px;
    font-family: inherit;
}#page-map-editor input:focus, #page-map-editor select:focus { outline: none; border-color: var(--accent); }#page-map-editor dialog {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0;
    width: 340px;
}#page-map-editor dialog::backdrop { background: rgba(0,0,0,0.6); }#page-map-editor .new-form { padding: 18px; }#page-map-editor .new-form h3 { margin: 0 0 14px 0; color: var(--text); }#page-map-editor .new-form .field span { flex: 0 0 90px; }#page-map-editor .new-form .field input, #page-map-editor .new-form .field select { flex: 1; width: auto; }#page-map-editor .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }#page-map-editor #open-dialog { width: 420px; }#page-map-editor .open-form { padding: 18px; }#page-map-editor .open-form h3 { margin: 0 0 8px 0; color: var(--text); }#page-map-editor .open-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 320px;
    overflow-y: auto;
    margin: 8px 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    padding: 4px;
    min-height: 60px;
}#page-map-editor .open-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 5px;
    border: 1px solid transparent;
    cursor: pointer;
    background: var(--panel-2);
}#page-map-editor .open-row:hover { border-color: var(--accent); background: var(--panel); }#page-map-editor .open-name { font-size: 13px; font-weight: 600; }#page-map-editor .open-meta { font-size: 11px; color: var(--muted); font-family: ui-monospace, monospace; }#page-map-editor .field-col {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}#page-map-editor .field-col span { margin-bottom: 2px; }#page-map-editor .inspector-textarea {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 12px;
    font-family: ui-monospace, monospace;
    resize: vertical;
}#page-map-editor .inspector-textarea:focus { outline: none; border-color: var(--accent); }#page-map-editor .loot-editor { margin-bottom: 10px; }#page-map-editor .loot-header {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 4px;
}#page-map-editor .loot-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}#page-map-editor .loot-row input[type="text"] { flex: 1; min-width: 0; }#page-map-editor .loot-qty { width: 52px; flex: 0 0 52px; }#page-map-editor .loot-remove {
    flex: 0 0 auto;
    padding: 3px 7px;
    color: var(--danger);
    border-color: var(--danger);
    background: transparent;
    font-size: 13px;
    margin-top: 0;
    width: auto;
}#page-map-editor .loot-remove:hover { background: rgba(255,90,90,0.12); }#page-map-editor .loot-add { width: 100%; margin-top: 2px; }#page-map-editor ::-webkit-scrollbar { width: 10px; height: 10px; }#page-map-editor ::-webkit-scrollbar-thumb { background: #2c313c; border-radius: 6px; }#page-map-editor ::-webkit-scrollbar-track { background: transparent; }#page-map-editor .fl-splitter { position: absolute; z-index: 50; background: transparent; transition: background .1s ease; }#page-map-editor .fl-splitter[data-axis="col-left"] { left: var(--col-left);    top: 0; bottom: var(--row-bottom);
    width: var(--splitter-hit); transform: translateX(-50%); cursor: col-resize; }#page-map-editor .fl-splitter[data-axis="col-right"] { right: var(--col-right);  top: 0; bottom: 0;
    width: var(--splitter-hit); transform: translateX(50%);  cursor: col-resize; }#page-map-editor .fl-splitter[data-axis="row-bottom"] { bottom: var(--row-bottom); left: 0; right: var(--col-right);
    height: var(--splitter-hit); transform: translateY(50%);  cursor: row-resize; }#page-map-editor .fl-splitter::after { content: ""; position: absolute; inset: 0; margin: auto; background: transparent; transition: background .1s; }#page-map-editor .fl-splitter[data-axis^="col"]::after { width: 2px; }#page-map-editor .fl-splitter[data-axis="row-bottom"]::after { height: 2px; }#page-map-editor .fl-splitter:hover::after, #page-map-editor .fl-splitter.dragging::after { background: var(--splitter-hot); }#page-map-editor body.fl-resizing { user-select: none; }#page-map-editor body.fl-resizing.col, #page-map-editor body.fl-resizing.col * { cursor: col-resize !important; }#page-map-editor body.fl-resizing.row, #page-map-editor body.fl-resizing.row * { cursor: row-resize !important; }#page-map-editor .hier-toolbar { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }#page-map-editor .hier-toolbar button {
    padding: 3px 7px; font-size: 11px; line-height: 1;
    background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px; color: var(--text);
}#page-map-editor .hier-toolbar button:hover { border-color: var(--accent); }#page-map-editor .hier-toolbar .spacer { flex: 1 1 auto; }#page-map-editor .hierarchy.labels-scroll { overflow-x: auto; }#page-map-editor .hierarchy.labels-scroll .hier-row { width: max-content; min-width: 100%; }#page-map-editor .hierarchy.labels-scroll .hier-label { overflow: visible; text-overflow: clip; }#page-map-editor .hierarchy.labels-wrap .hier-row { height: auto; min-height: 17px; align-items: flex-start; }#page-map-editor .hierarchy.labels-wrap .hier-label { white-space: normal; word-break: break-word; overflow: visible; text-overflow: clip; }#page-map-editor button:focus-visible, #page-map-editor .pane-tab:focus-visible, #page-map-editor .tab:focus-visible, #page-map-editor .place-chip:focus-visible, #page-map-editor .hier-row:focus-visible, #page-map-editor .ptile:focus-visible, #page-map-editor input:focus-visible, #page-map-editor select:focus-visible, #page-map-editor .hierarchy:focus-visible, #page-map-editor .fl-splitter:focus-visible {
    outline: var(--focus-ring); outline-offset: var(--focus-offset);
}#page-map-editor .preset-field span { color: var(--muted); font-size: 12px; }#page-map-editor .preset-select { font-size: 12px; padding: 4px 6px; width: auto; min-width: 120px; }#page-map-editor /* Virtualization fix (plan §5.3): make #hierarchy the constrained INTERNAL scroll container.
   hierIndex.js reads hierEl.scrollTop/clientHeight; without this the block-flow .pane-body is the
   scroller and #hierarchy grows to full content height, #page-map-editor so renderWindow() would realize every row. */
#left-panel .pane-body { display: flex; flex-direction: column; }#page-map-editor #left-panel .left-tabpane { display: none; }#page-map-editor #left-panel .left-tabpane.active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }#page-map-editor #left-panel .left-tabpane[data-left-pane="hierarchy"] > #hier-toolbar, #page-map-editor #left-panel .left-tabpane[data-left-pane="hierarchy"] > #hier-filter, #page-map-editor #left-panel .left-tabpane[data-left-pane="hierarchy"] > .checkbox { flex: 0 0 auto; }#page-map-editor #left-panel #hierarchy { flex: 1 1 auto; min-height: 0; }#page-map-editor .file-actions { display: flex; flex-direction: column; gap: 8px; }#page-map-editor .file-actions button { width: 100%; padding: 8px 10px; text-align: left; font-size: 13px; }#page-map-editor .left-tabpane[data-left-pane="file"] .hint { margin-top: 10px; }#page-map-editor /* ===== Feature 1 — Hierarchy: count pills + per-category/realm color rail (plan §4, #page-map-editor §5.2) ===== */


.fl-pill {
    background: var(--pill-bg);
    color: var(--pill-text);
    border-radius: 999px;
    padding: 0 6px;
    min-width: 16px;
    text-align: center;
    font-size: 10px;
}#page-map-editor .fl-pill.realm {
    background: color-mix(in srgb, var(--cat-color, var(--realm-misc)) 24%, var(--pill-bg));
    color: #fff;
}#page-map-editor /* Left color rail on category/realm group headers — tint ONLY a thin inset rail + the twisty, #page-map-editor never the
   row background (keeps rows readable; the existing :hover background stays in charge). */
.hier-railed { box-shadow: inset 3px 0 0 -1px var(--cat-color, transparent); }#page-map-editor .hier-railed > .hier-twisty { color: var(--cat-color, var(--muted)); }#page-map-editor .hier-realm[data-realm="earth"] { --cat-color: var(--realm-earth); }#page-map-editor .hier-realm[data-realm="dungeon"] { --cat-color: var(--realm-dungeon); }#page-map-editor .hier-realm[data-realm="water"] { --cat-color: var(--realm-water); }#page-map-editor .hier-realm[data-realm="heavenly"] { --cat-color: var(--realm-heavenly); }#page-map-editor .hier-realm[data-realm="infernal"] { --cat-color: var(--realm-infernal); }#page-map-editor .hier-realm[data-realm="shadow"] { --cat-color: var(--realm-shadow); }#page-map-editor .hier-realm[data-realm="dream"] { --cat-color: var(--realm-dream); }#page-map-editor .hier-realm[data-realm="ice"] { --cat-color: var(--realm-ice); }#page-map-editor .hier-realm[data-realm="desert"] { --cat-color: var(--realm-desert); }#page-map-editor .hier-realm[data-realm="mechanical"] { --cat-color: var(--realm-mechanical); }#page-map-editor .hier-realm[data-realm="dragon"] { --cat-color: var(--realm-dragon); }#page-map-editor .hier-realm[data-realm="misc"] { --cat-color: var(--realm-misc); }#page-map-editor .hier-realm > .hier-label { color: var(--cat-color); font-weight: 600; }#page-map-editor #inspector-search { position: sticky; top: 0; z-index: 5; }#page-map-editor .inspector-preview {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    margin-bottom: 10px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 6px;
}#page-map-editor .ip-thumb {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    border-radius: 4px;
    image-rendering: pixelated;
    overflow: hidden;
}#page-map-editor .ip-thumb canvas { image-rendering: pixelated; }#page-map-editor .ip-glyph { font-size: 20px; line-height: 1; }#page-map-editor .ip-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }#page-map-editor .ip-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}#page-map-editor .ip-badge {
    align-self: flex-start;
    text-transform: capitalize;
    background: color-mix(in srgb, var(--cat-color, var(--accent)) 28%, var(--pill-bg));
    color: #fff;
    font-size: 10px;
    padding: 1px 7px;
}#page-map-editor .ip-pos { font-size: 11px; color: var(--muted); font-family: ui-monospace, monospace; }#page-map-editor .fl-section { margin-bottom: 8px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }#page-map-editor .fl-section.section-empty { display: none; }#page-map-editor .fl-section-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: var(--section-head);
    cursor: pointer;
    user-select: none;
}#page-map-editor .fl-section-head:hover { background: var(--panel-3); }#page-map-editor .fl-section-twisty { flex: 0 0 12px; width: 12px; text-align: center; font-size: 10px; color: var(--muted); }#page-map-editor .fl-section-title { font-size: 12px; font-weight: 600; color: var(--text); }#page-map-editor .fl-section-body { padding: 8px; }#page-map-editor .fl-section-body[data-collapsed] { display: none; }#page-map-editor .field.field-filtered { display: none; }#page-map-editor .fl-viewmode { display: flex; gap: 1px; margin-bottom: 6px; width: max-content; }#page-map-editor .fl-viewmode button {
    font-size: 11px;
    padding: 3px 8px;
    line-height: 1;
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 0;
}#page-map-editor .fl-viewmode button:first-child { border-radius: 4px 0 0 4px; }#page-map-editor .fl-viewmode button:last-child { border-radius: 0 4px 4px 0; }#page-map-editor .fl-viewmode button.active { background: var(--accent); color: #fff; }#page-map-editor .ptile { position: relative; display: inline-flex; }#page-map-editor .ptile-canvas { width: 32px; height: 32px; image-rendering: pixelated; background: #000; display: block; }#page-map-editor /* Favorite star — tucked in the corner, #page-map-editor brightens on hover/active. */
.pal-star {
    position: absolute;
    top: -2px;
    right: -2px;
    padding: 0 2px;
    line-height: 1;
    font-size: 11px;
    background: transparent;
    border: none;
    color: var(--muted);
    opacity: 0;
    transition: opacity .1s, color .1s;
}#page-map-editor .ptile:hover .pal-star, #page-map-editor .pal-star.on { opacity: 1; }#page-map-editor .pal-star.on { color: #ffce4d; }#page-map-editor .pal-star:hover { color: #ffce4d; }#page-map-editor /* List view: one row per tile, #page-map-editor id rendered as a label after the thumbnail. */
.pview-list .palette-grid { display: flex; flex-direction: column; gap: 1px; }#page-map-editor .pview-list .ptile { width: 100%; height: 24px; align-items: center; }#page-map-editor .pview-list .ptile-canvas { width: 20px; height: 20px; flex: 0 0 20px; }#page-map-editor .pview-list .ptile::after {
    content: attr(data-tile-id);
    margin-left: 8px;
    font-size: 11px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}#page-map-editor .pview-list .pal-star { position: static; opacity: 1; margin-left: auto; }#page-map-editor .pview-large .palette-grid { grid-template-columns: repeat(auto-fill, 64px); }#page-map-editor .pview-large .ptile-canvas { width: 64px; height: 64px; }#page-map-editor .pal-pinned { margin-bottom: 8px; }#page-map-editor .pal-pinned[hidden] { display: none; }#page-map-editor .pal-pinned-head {
    cursor: default;
    background: var(--section-head);
    border-radius: 4px 4px 0 0;
    padding: 4px 8px;
}#page-map-editor .pal-strip {
    max-height: 84px;
    border-top: none;
    border-radius: 0 0 6px 6px;
}#page-map-editor /* In list view, #page-map-editor keep the pinned strips compact as small chips (don't inherit the full-width list rows). */
.pview-list .pal-strip { display: grid; grid-template-columns: repeat(auto-fill, 32px); gap: 2px; }#page-map-editor .pview-list .pal-strip .ptile { width: 32px; height: 32px; }#page-map-editor .pview-list .pal-strip .ptile-canvas { width: 32px; height: 32px; }#page-map-editor .pview-list .pal-strip .ptile::after { content: none; }#page-map-editor .place-star { position: static; opacity: 0; margin-left: 4px; flex: 0 0 auto; }#page-map-editor .place-row:hover .place-star, #page-map-editor .place-star.on { opacity: 1; }#page-map-editor #palette-search { position: sticky; top: 0; z-index: 5; }#page-map-editor body.fl-hc {
    --bg: #0a0a0a;
    --panel: #1a1a1a;
    --panel-2: #222;
    --panel-3: #2e2e2e;
    --border: #5a5a5a;
    --text: #f2f2f2;
    --muted: #c4c4c4;
    --accent: #5aa0ff;
    --accent-sel: #1c4f8a;
    --tip-bg: #000;
    --tip-text: #fff;
    --focus-ring: 3px solid #ffd23f;
    --section-head: #2e2e2e;
}#page-map-editor .a11y-controls { display: inline-flex; gap: 2px; align-items: center; }#page-map-editor .a11y-btn {
    min-width: 26px;
    padding: 3px 7px;
    font-size: 12px;
    line-height: 1;
}#page-map-editor #a11y-contrast[aria-pressed="true"] { background: var(--accent); color: #fff; }#page-map-editor .hier-row.hier-cursor {
    outline: var(--focus-ring);
    outline-offset: -1px;
    background: var(--panel-2);
}#page-map-editor .hier-spacer { flex: 0 0 auto; height: 0; pointer-events: none; }



/* --- TaleClip embed layout (added by build.py) --- */
.creator-area:has(#page-map-editor.active) { max-width: none; padding-left: 0; padding-right: 0; }
#page-map-editor { height: calc(100vh - 56px); height: calc(100dvh - 56px); min-height: 540px; width: 100%; overflow: hidden;
    display: flex; flex-direction: column; }
#page-map-editor #app { flex: 1 1 auto; height: auto; min-height: 0; width: 100%; }
body:has(#page-map-editor.active) #mobileBottomNav { display: none; }
body.fl-mapeditor-active #mobileBottomNav { display: none; }


/* --- mobile-shell block: appended UNSCOPED (body-level selectors + @media) --- */
/* ================================================================
   === Mobile shell (Phase 3) — appended by mobileShell.js CSS  ===
   ================================================================
   The .fl-mobile marker class is set on the editor's OWN #app (see
   mobileShell.js _editorRoot), NOT on <body>. So every layout rule below
   (.fl-mobile #canvas-wrap, etc.) scopes to the editor's own descendants
   and can NEVER match a host SPA's same-named ids (TaleClip ships its own
   #canvas-wrap / #nav-controls). build.py appends this block UNSCOPED — it
   is already self-scoping via .fl-mobile + the unique #fl-* ids.
   ================================================================ */

/* ---------- touch-action: prevent browser scroll/zoom fighting canvas gestures ---------- */
#zone-canvas { touch-action: none; }

/* ---------- Mobile top bar ---------- */
#fl-mobile-topbar {
    display: none;          /* hidden until #app.fl-mobile is added */
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    height: 44px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    box-sizing: border-box;
}

/* ---------- Mobile bottom icon bar ---------- */
#fl-bottom-bar {
    display: none;          /* hidden until #app.fl-mobile is added */
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
    height: 56px;
    background: var(--panel);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
}

/* ---------- Bottom sheet ---------- */
#fl-bottom-sheet {
    display: none;          /* hidden until .fl-sheet-open is added */
    position: fixed;
    left: 0; right: 0; bottom: 56px;   /* sits above the bottom bar */
    z-index: 190;
    height: 50%;            /* default ~50% of viewport */
    min-height: 120px;
    max-height: 80%;
    background: var(--panel);
    border-top: 1px solid var(--border);
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.25s ease;
    flex-direction: column;
}
#fl-bottom-sheet.fl-sheet-open {
    transform: translateY(0);
}

#fl-sheet-handle {
    flex: 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: row-resize;
    touch-action: none;
}
#fl-sheet-handle::after {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--muted);
    opacity: 0.5;
}

#fl-sheet-body {
    flex: 1 1 0;
    overflow: auto;
    padding: 4px;
}

/* ---------- Shared mobile button / pill styles ---------- */
.fl-mob-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    -webkit-tap-highlight-color: transparent;
}
.fl-mob-btn:active { opacity: 0.7; }
.fl-mob-pill {
    background: var(--pill-bg, var(--panel-2));
    border-radius: 20px;
    padding: 0 14px;
    font-size: 12px;
}
.fl-mob-pill.active {
    background: var(--accent);
    color: #fff;
}

.fl-mob-spacer { flex: 1 1 0; }

.fl-mob-zoom-label {
    font-size: 12px;
    color: var(--muted);
    min-width: 38px;
    text-align: right;
}

/* ---------- Bottom bar tab buttons ---------- */
.fl-bar-tab {
    flex: 1 1 0;
    min-height: 44px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s;
}
.fl-bar-tab:active { opacity: 0.7; }
.fl-bar-tab.active {
    color: var(--accent);
}
.fl-bar-icon { font-size: 18px; line-height: 1; }
.fl-bar-label { font-size: 10px; line-height: 1; }

/* ================================================================
   Phone portrait / landscape  (≤ 768 px wide)
   Active only when .fl-mobile is set on #app by applyFormFactor().
   ================================================================ */
@media (max-width: 768px) {
    /* Show the injected mobile chrome (bars are children of #app.fl-mobile) */
    .fl-mobile #fl-mobile-topbar,
    .fl-mobile #fl-bottom-bar,
    .fl-mobile #fl-bottom-sheet { display: flex; }

    /* #app collapses: hide left/right/bottom docked panels — canvas fills the grid */
    #app.fl-mobile {
        grid-template-columns: 0 minmax(0, 1fr) 0;
        grid-template-rows: minmax(0, 1fr) 0;
    }
    .fl-mobile #left-panel,
    .fl-mobile #right-panel,
    .fl-mobile #project-dock { display: none; }

    /* …but when a panel is reparented INTO the bottom sheet it is still a descendant of
       #app.fl-mobile, so the rule above would keep it display:none. Un-hide + fill the sheet
       (the panel becomes a flex column; its .pane-body scrolls internally). */
    .fl-mobile #fl-sheet-body > * {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    /* Canvas wrap fills available space between top bar and bottom bar */
    .fl-mobile #canvas-wrap {
        position: fixed;
        top: 44px;           /* below mobile top bar */
        bottom: 56px;        /* above mobile bottom bar */
        left: 0; right: 0;
        z-index: 1;
        overflow: hidden;
    }

    /* Canvas fills its host */
    .fl-mobile #zone-canvas {
        width: 100% !important;
        height: 100% !important;
    }

    /* Hide desktop floating nav controls on phone — top bar covers the same affordances */
    .fl-mobile #nav-controls { display: none; }

    /* Hide dock splitter handles on phone */
    .fl-mobile .fl-splitter { display: none; }
}

/* Extra-small phones (≤ 480 px) — same rules, tighter top bar text */
@media (max-width: 480px) {
    .fl-mobile .fl-mob-zoom-label { display: none; }
    .fl-mobile .fl-bar-label { display: none; }
    .fl-mobile .fl-bar-icon { font-size: 20px; }
    .fl-mobile #fl-bottom-bar { height: 52px; }
    .fl-mobile #fl-bottom-sheet { bottom: 52px; }
}

/* Short landscape (phone rotated) — reduce sheet height so canvas remains visible */
@media (max-height: 500px) and (orientation: landscape) {
    .fl-mobile #fl-bottom-sheet {
        height: 40%;
        max-height: 60%;
    }
    .fl-mobile #fl-mobile-topbar { height: 38px; }
    .fl-mobile #canvas-wrap { top: 38px; }
}

/* ================================================================
   Tablet / desktop (≥ 769 px) — ensure mobile chrome is hidden
   regardless of body class state.
   ================================================================ */
@media (min-width: 769px) {
    #fl-mobile-topbar,
    #fl-bottom-bar,
    #fl-bottom-sheet { display: none !important; }
}