/* layout area: location tree and warehouse map (Taiga Day: white page, pine + orange accents) */
.lay-view { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.lay-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.lay-toolbar h2 { margin: 0 var(--space-3) 0 0; font-size: 1.1rem; }
.lay-inline { display: inline-flex; gap: var(--space-1); }
.lay-split { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: var(--space-4); align-items: start; }
.lay-split.map { grid-template-columns: 1fr minmax(260px, 340px); }
.lay-tree { max-height: 75vh; overflow: auto; }
.lay-detail { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--space-4); min-height: 200px; }
.lay-detail h2 { margin-top: 0; font-size: 1.05rem; }
.lay-detail h3 { font-size: .9rem; color: var(--text-muted); margin: var(--space-4) 0 var(--space-2); }
.lay-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.lay-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.lay-list li { display: flex; align-items: center; gap: var(--space-2); }
.lay-map { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--space-2); overflow: auto; min-height: 300px; }
.lay-svg { width: 100%; height: auto; max-height: 75vh; display: block; }
.lay-bg line, .lay-bg polyline, .lay-bg polygon { stroke: var(--text-faint); stroke-width: .05; fill: none; }
.lay-bg text { fill: var(--text-faint); }
.lay-block-frame { fill: none; stroke: var(--pine); stroke-width: .08; }
.lay-block.wall .lay-block-frame { fill: var(--text-faint); }
.lay-block.dock .lay-block-frame { stroke: var(--accent); }
.lay-block-label { fill: var(--text); font-weight: 600; }
.lay-cell { stroke: var(--border); stroke-width: .03; cursor: pointer; }
.lay-cell:hover, .lay-cell:focus { stroke: var(--accent); stroke-width: .12; outline: none; }
.lay-cell.marked { stroke: var(--accent); stroke-width: .18; }
.lay-path { fill: none; stroke: var(--accent); stroke-width: .15; stroke-dasharray: .4 .2; }
.lay-path-no { fill: var(--accent); font-weight: 700; }
.lay-worker { fill: var(--accent); stroke: var(--surface); stroke-width: .1; }
.lay-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: .85rem; color: var(--text-muted); }
.lay-swatch { display: inline-flex; align-items: center; gap: var(--space-1); }
.lay-swatch-box { width: 14px; height: 14px; border: 1px solid var(--border); border-radius: 3px; display: inline-block; }
@media (max-width: 900px) { .lay-split, .lay-split.map { grid-template-columns: 1fr; } }