/* Views: reorder bar + deterministic grid. Panels keep their own scrollers. */
view-layout { display:block; min-width:0; max-width:100%; }
.view-layout-bar { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:0 2px; margin:0 0 var(--space-2); min-height:28px; }
.view-layout-title { display:flex; align-items:center; margin-right:2px; }
.view-layout-title strong { font:600 10px/1 var(--font-sans); letter-spacing:.09em; text-transform:uppercase; color:var(--color-muted); }
.view-layout-presets { display:flex; flex-wrap:wrap; gap:1px; padding:1px; border:1px solid var(--color-line); border-radius:999px; background:var(--color-surface); }
.view-layout-presets .ui-action { font:500 11px/1.3 var(--font-sans); min-height:28px; min-width:0; padding:3px 9px; border:0; border-radius:999px; background:transparent; color:var(--color-muted); }
.view-layout-presets .ui-action:hover { background:var(--color-wash); color:var(--color-ink); }
.view-layout-bar [data-view-reset] { font:500 11px/1.3 var(--font-sans); min-height:28px; min-width:0; padding:3px 4px; border:0; background:transparent; color:var(--color-muted); text-decoration:underline; }
ui-disclosure.view-layout-arrange { display:flex; margin-left:auto; }
ui-disclosure.view-layout-arrange > [data-ui-toggle] { width:auto; min-height:28px; border:0; padding:3px 8px; border-radius:999px; gap:2px; font:500 11px/1.3 var(--font-sans); color:var(--color-muted); background:transparent; }
ui-disclosure.view-layout-arrange > [data-ui-toggle]:hover { background:var(--color-wash); color:var(--color-ink); }
.view-layout-arrange .ui-disclosure-indicator { width:auto; margin:0 0 0 3px; font-size:12px; line-height:1; }
ui-disclosure.view-layout-arrange > [data-ui-panel] { position:absolute; top:calc(100% + 4px); right:0; z-index:30; width:min(330px,calc(100vw - 24px)); padding:8px; border:1px solid var(--color-line); border-radius:var(--radius-sm); background:var(--color-surface); box-shadow:0 14px 32px rgb(0 0 0 / .18); }
.view-layout-list { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.view-layout-row { display:flex; align-items:center; gap:6px; padding:2px 6px 2px 2px; border-radius:var(--radius-sm); background:var(--color-surface); transition:transform .12s ease, box-shadow .12s ease; }
.view-layout-row.is-dragging { position:relative; z-index:2; box-shadow:0 10px 24px rgb(0 0 0 / .18); background:var(--color-surface-raised,var(--color-surface)); }
.view-layout-grip { flex:0 0 auto; width:24px; height:24px; padding:0; display:grid; place-items:center; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--color-muted); cursor:grab; touch-action:none; font-size:12px; }
.view-layout-grip:active { cursor:grabbing; }
.view-layout-name { font:600 12px/1.3 var(--font-sans); color:var(--color-ink); }
.view-layout-position { min-width:1.4em; text-align:center; font:var(--text-xs) var(--font-mono); color:var(--color-muted); font-variant-numeric:tabular-nums; }
.view-layout-move { width:24px; height:24px; min-height:0; padding:0; display:grid; place-items:center; border:1px solid var(--color-line); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-ink); font-size:12px; }
.view-layout-move:disabled { opacity:.35; }
.view-layout-row [data-view-action="full"] { margin-left:auto; font:500 11px/1.3 var(--font-sans); padding:3px 7px; min-height:0; min-width:0; border:0; }
.view-layout-row [data-view-action="full"][aria-pressed="true"] { background:var(--color-primary); color:var(--color-on-primary); border-color:var(--color-primary); }
.view-layout-grid { display:grid; grid-template-columns:repeat(var(--view-columns,12),minmax(0,1fr)); gap:var(--space-3); align-items:start; }
.view-layout-region { min-width:0; }
.view-layout-region[data-span="3"] { max-width:100%; }
.view-layout[data-mode="compact"] .view-layout-bar { gap:4px; margin-bottom:var(--space-1); }
.view-layout[data-mode="compact"] .view-layout-title { display:none; }
.view-layout[data-mode="compact"] .view-layout-presets .ui-action { padding:3px 7px; font-size:10px; }
.view-layout[data-mode="compact"] ui-disclosure.view-layout-arrange { margin-left:0; }
.view-layout[data-mode="compact"] ui-disclosure.view-layout-arrange > [data-ui-panel] { left:0; right:0; width:auto; max-width:none; }
.view-layout[data-density="compact"] .view-layout-grid { gap:var(--space-2); }
.view-layout[data-density="compact"] .view-layout-name { font-size:var(--text-xs); }
@media(max-width:420px) {
  .view-layout-row { flex-wrap:wrap; row-gap:4px; }
  .view-layout-row [data-view-action="full"] { margin-left:0; }
}
/* Gallery documentation demo only. */
.view-demo { display:flex; flex-direction:column; gap:6px; padding:var(--space-3); border:1px solid var(--color-line); border-radius:var(--radius-sm); background:var(--color-surface); }
.view-demo h3 { margin:0; }
.view-demo p { margin:0; color:var(--color-muted); font-size:var(--text-xs); }
.view-demo-bar { height:8px; border-radius:999px; background:var(--color-primary-soft); }
.view-demo-size { font:var(--text-xs) var(--font-mono); color:var(--color-primary-text); font-variant-numeric:tabular-nums; }
.component-lab:has(#demo-layout) { max-width:1440px; }