/* layout.js -- a page's panels on a 12-column grid, arranged and sized per person */
.page.lay.on{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
.page.lay>*{grid-column:1/-1;position:relative}
.page.lay>[data-span="3"]{grid-column:span 3}.page.lay>[data-span="4"]{grid-column:span 4}
.page.lay>[data-span="5"]{grid-column:span 5}.page.lay>[data-span="6"]{grid-column:span 6}
.page.lay>[data-span="7"]{grid-column:span 7}.page.lay>[data-span="8"]{grid-column:span 8}
.page.lay>[data-span="9"]{grid-column:span 9}.page.lay>[data-span="10"]{grid-column:span 10}
.page.lay>[data-span="11"]{grid-column:span 11}.page.lay>[data-span="12"]{grid-column:span 12}
.page.lay>.fixh{overflow:auto}
.page.lay>.lay-top{grid-column:1/-1}

/* the side-menu button */
.lay-btn{display:block;width:100%;margin:0 0 10px;background:none;border:1px solid var(--rule);color:var(--muted);border-radius:5px;
  padding:6px 10px;font:600 12.5px var(--body);cursor:pointer;text-align:left}
.lay-btn:hover{color:var(--ink)}
body.lay-editing .lay-btn{background:var(--ink);color:var(--panel);border-color:var(--ink)}

/* edit mode */
.lay-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 14px;border:1px dashed var(--muted);
  border-radius:6px;font:13px var(--body);color:var(--muted)}
.lay-top button,.lay-w button{background:var(--panel);border:1px solid var(--rule);color:var(--ink);border-radius:4px;padding:3px 9px;
  font:600 12px var(--body);cursor:pointer}
.lay-top button:hover,.lay-w button:hover{border-color:var(--ink)}
body.lay-editing .page.lay>[data-lid]{outline:2px dashed color-mix(in srgb,var(--muted) 60%,transparent);outline-offset:2px}
.lay-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:-6px -6px 10px;padding:4px 6px;
  background:color-mix(in srgb,var(--muted) 12%,transparent);border-radius:4px;user-select:none}
.lay-grip{cursor:grab;font:600 12.5px var(--body);color:var(--ink);padding:2px 6px;touch-action:none}
.lay-w{display:flex;gap:4px}
.tiles>.lay-bar{grid-column:1/-1;margin:0}
.lay-corner{position:absolute;right:2px;bottom:2px;width:16px;height:16px;cursor:nwse-resize;touch-action:none;
  background:linear-gradient(135deg,transparent 50%,var(--muted) 50%,var(--muted) 60%,transparent 60%,transparent 70%,var(--muted) 70%,var(--muted) 80%,transparent 80%)}
.lay-drag{opacity:.55;outline-color:var(--ink)!important}
body.lay-editing{user-select:none}

/* narrow screens: everything full width, heights back to the content */
@media (max-width:900px){.page.lay>[data-span]{grid-column:1/-1}.page.lay>.fixh{height:auto!important}.lay-btn{display:none}}