/* Alignment guides (Layout) and the standard layouts picker. Loads after relay.css. Animation only inside prefers-reduced-motion: no-preference. */
.ag-layer { position: absolute; inset: 0; pointer-events: none; z-index: 40; transition: opacity .18s ease-out; }
.ag-layer.ag-out { opacity: 0; }
.ag-line { position: absolute; display: block; pointer-events: none; --ag-c: #C4623A; }
.ag-line.ag-x { width: var(--ag-w, 2px); margin-left: calc(var(--ag-w, 2px) / -2); }
.ag-line.ag-y { height: var(--ag-w, 2px); margin-top: calc(var(--ag-w, 2px) / -2); }
.ag-exact { background: var(--ag-c); box-shadow: 0 0 0 calc(var(--ag-w, 2px) * .6) rgb(196 98 58 / .22); }
.ag-near { background: repeating-linear-gradient(var(--dir, 180deg), rgb(196 98 58 / .55) 0 6px, transparent 6px 12px); opacity: .7; }
.ag-near.ag-y { --dir: 90deg; }
/* end caps on exact lines: a small diamond at each end, so the extent of the alignment is clear */
.ag-exact::before, .ag-exact::after { content: ""; position: absolute; width: var(--ag-dot, 9px); height: var(--ag-dot, 9px); background: var(--ag-c); transform: translate(-50%, -50%) rotate(45deg); }
.ag-exact.ag-x::before { left: 50%; top: 0; } .ag-exact.ag-x::after { left: 50%; top: 100%; }
.ag-exact.ag-y::before { top: 50%; left: 0; } .ag-exact.ag-y::after { top: 50%; left: 100%; }
body[data-mode=dark] .ag-line { --ag-c: #E3A07F; }
body[data-mode=dark] .ag-near { background: repeating-linear-gradient(var(--dir, 180deg), rgb(227 160 127 / .6) 0 6px, transparent 6px 12px); }
@media (prefers-reduced-motion: no-preference) {
  .ag-line.ag-x { transform-origin: 50% 0; animation: ag-grow-y .18s ease-out; }
  .ag-line.ag-y { transform-origin: 0 50%; animation: ag-grow-x .18s ease-out; }
  .ag-exact { animation-name: ag-grow-y, ag-lock; animation-duration: .18s, .5s; animation-timing-function: ease-out; }
  .ag-exact.ag-y { animation-name: ag-grow-x, ag-lock; }
  @keyframes ag-grow-y { from { transform: scaleY(.2); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes ag-grow-x { from { transform: scaleX(.2); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes ag-lock { 0% { filter: brightness(1.7); } 100% { filter: none; } }
}
/* the desk being dragged gets a calm lift while a guide is showing is left to the existing .dragging style */

.layouts-section .hint { margin: 2px 0 8px; }
dialog.layouts { width: min(1040px, calc(100vw - 24px)); max-height: calc(100vh - 40px); overflow: auto; padding: 18px 20px 16px; }
.layouts .dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lp-lead { margin: 6px 0 12px; color: var(--muted); max-width: 70ch; line-height: 1.45; }
.lp-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.lp-opts input[type=number] { width: 5.5em; min-height: 38px; }
.lp-opts .check-label { display: inline-flex; align-items: center; gap: 6px; }
.lp-max { color: var(--muted); font: 600 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.lp-card { display: grid; gap: 4px; align-content: start; text-align: left; padding: 8px; min-height: 0; }
.lp-card[aria-pressed=true] { background: var(--sel-bg) !important; border-color: var(--ink) !important; box-shadow: inset 0 0 0 2px var(--ink); }
.lp-thumbwrap { display: block; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--raised); aspect-ratio: 4 / 3; }
.lp-thumb { width: 100%; height: 100%; display: block; }
.lp-name { font-size: 14px; }
.lp-note { color: var(--muted); font-weight: 500; line-height: 1.35; white-space: normal; }
.lp-count { font: 700 11px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.lp-warn { margin: 12px 0 0; color: var(--ink); line-height: 1.45; }
.lp-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }