Fianlize deck strip and management

styles/components/_directors-board.less

@@ -263,4 +263,78 @@
       &:hover { background: rgba(50, 55, 70, 0.9); }
     }
   }
+
+  // ── Dock layout selector bar ───────────────────────────────────────────────
+  .directors-board__dock-layout-bar {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 8px;
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    flex-shrink: 0;
+    background: rgba(0, 0, 0, 0.12);
+  }
+
+  .directors-board__dock-layout-label {
+    font-size: 10px;
+    color: var(--sp-text-muted, hsl(0, 0%, 60%));
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    flex-shrink: 0;
+    margin-right: 2px;
+  }
+
+  .directors-board__dock-layout-group {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    flex-wrap: wrap;
+  }
+
+  .directors-board__dock-layout-sep {
+    width: 1px;
+    height: 20px;
+    background: rgba(255, 255, 255, 0.12);
+    margin: 0 3px;
+    flex-shrink: 0;
+  }
+
+  .directors-board__dock-layout-btn {
+    width: 28px;
+    height: 28px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1px;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+    cursor: pointer;
+    color: var(--sp-text-muted, hsl(0, 0%, 65%));
+    padding: 0;
+    transition: background 0.15s, border-color 0.15s, color 0.15s;
+
+    i { font-size: 10px; pointer-events: none; }
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: var(--sp-text-primary, #dde2e8);
+      border-color: rgba(255, 255, 255, 0.2);
+    }
+
+    &.is-active {
+      background: hsl(200, 50%, 25%);
+      border-color: hsl(200, 55%, 45%);
+      color: hsl(200, 80%, 75%);
+    }
+  }
+
+  .directors-board__dock-layout-size {
+    font-size: 8px;
+    font-weight: 600;
+    line-height: 1;
+    letter-spacing: 0.02em;
+    pointer-events: none;
+  }
 }

styles/components/_roster-strip.less

@@ -43,13 +43,92 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  max-width: 44px;
+  max-width: 83px;
   overflow: hidden;
   transition: max-width 200ms ease-in-out;
 
   &.is-expanded {
     max-width: 240px;
   }
+
+  // Horizontal and mosaic layouts: width is controlled by JS setPosition
+  &.sp-layout-horizontal-sm,
+  &.sp-layout-horizontal-md,
+  &.sp-layout-mosaic-sm,
+  &.sp-layout-mosaic-md {
+    max-width: none;
+    align-items: flex-start;
+  }
+}
+
+// ── Horizontal layout ────────────────────────────────────────────────────────
+.scrying-pool.scrying-pool-strip.sp-layout-horizontal-sm,
+.scrying-pool.scrying-pool-strip.sp-layout-horizontal-md {
+  .sp-strip__participants {
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: 4px;
+    gap: 4px;
+    justify-content: flex-start;
+    width: auto;
+  }
+}
+
+// ── Mosaic layout ────────────────────────────────────────────────────────────
+.scrying-pool.scrying-pool-strip.sp-layout-mosaic-sm,
+.scrying-pool.scrying-pool-strip.sp-layout-mosaic-md {
+  .sp-strip__participants {
+    display: grid;
+    padding: 4px;
+    gap: 4px;
+    // Keep width: 100% (from base) so auto-fill has a definite inline size
+  }
+}
+
+.scrying-pool.scrying-pool-strip.sp-layout-mosaic-sm .sp-strip__participants {
+  grid-template-columns: repeat(auto-fill, 83px);
+}
+
+.scrying-pool.scrying-pool-strip.sp-layout-mosaic-md .sp-strip__participants {
+  grid-template-columns: repeat(auto-fill, 150px);
+}
+
+// ── Medium tile size for horizontal / mosaic ─────────────────────────────────
+.scrying-pool.scrying-pool-strip.sp-layout-horizontal-md,
+.scrying-pool.scrying-pool-strip.sp-layout-mosaic-md {
+  .sp-participant-avatar {
+    width: 150px;
+    height: 150px;
+    flex-direction: column;
+    align-items: center;
+    padding: 8px 4px 4px;
+    gap: 4px;
+
+    .sp-avatar__img {
+      width: 91px;
+      height: 91px;
+      border-radius: 6px;
+      flex-shrink: 0;
+    }
+
+    .sp-avatar__name {
+      display: block;
+      font-size: 0.65rem;
+      text-align: center;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .sp-avatar__corner-badge {
+      bottom: 4px;
+      right: 4px;
+    }
+
+    // Remove the is-expanded overlay styles that interfere with tile layout
+    &::after { display: none; }
+  }
 }
 
 // ── Drag grip (top bar, replaces window header drag affordance) ────────────────
@@ -109,8 +188,8 @@
 }
 
 .sp-strip__toggle {
-  width: 44px;
-  min-width: 44px;
+  width: 83px;
+  min-width: 83px;
   height: 28px;
   display: flex;
   align-items: center;
@@ -164,6 +243,10 @@
   gap: 4px;
 }
 
+.sp-strip__participant-item {
+  margin: 0; // override browser/Foundry default <li> margins
+}
+
 .sp-strip__first-tip {
   font-size: 0.75rem;
   color: var(--sp-text-muted, hsl(0, 0%, 60%));
@@ -176,8 +259,8 @@
 // ============================================================
 .sp-participant-avatar {
   position: relative;
-  width: 44px;
-  height: 44px;
+  width: 83px;
+  height: 83px;
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -223,6 +306,7 @@
       z-index: 1;
       width: 48px;
       height: 48px;
+      border-radius: 6px; // card view — rectangular
     }
 
     .sp-avatar__name {
@@ -266,9 +350,9 @@
 }
 
 .sp-avatar__img {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+  border-radius: 6px;
   object-fit: cover;
   flex-shrink: 0;
 }
@@ -278,7 +362,7 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-  border-radius: 50%;
+  border-radius: 6px;
   background: hsl(220, 15%, 18%);
   
   .is-expanded & {

styles/scrying-pool.css

@@ -494,13 +494,76 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  max-width: 44px;
+  max-width: 83px;
   overflow: hidden;
   transition: max-width 200ms ease-in-out;
 }
 .scrying-pool.scrying-pool-strip.is-expanded {
   max-width: 240px;
 }
+.scrying-pool.scrying-pool-strip.sp-layout-horizontal-sm,
+.scrying-pool.scrying-pool-strip.sp-layout-horizontal-md,
+.scrying-pool.scrying-pool-strip.sp-layout-mosaic-sm,
+.scrying-pool.scrying-pool-strip.sp-layout-mosaic-md {
+  max-width: none;
+  align-items: flex-start;
+}
+.scrying-pool.scrying-pool-strip.sp-layout-horizontal-sm .sp-strip__participants,
+.scrying-pool.scrying-pool-strip.sp-layout-horizontal-md .sp-strip__participants {
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding: 4px;
+  gap: 4px;
+  justify-content: flex-start;
+  width: auto;
+}
+.scrying-pool.scrying-pool-strip.sp-layout-mosaic-sm .sp-strip__participants,
+.scrying-pool.scrying-pool-strip.sp-layout-mosaic-md .sp-strip__participants {
+  display: grid;
+  padding: 4px;
+  gap: 4px;
+}
+.scrying-pool.scrying-pool-strip.sp-layout-mosaic-sm .sp-strip__participants {
+  grid-template-columns: repeat(auto-fill, 83px);
+}
+.scrying-pool.scrying-pool-strip.sp-layout-mosaic-md .sp-strip__participants {
+  grid-template-columns: repeat(auto-fill, 150px);
+}
+.scrying-pool.scrying-pool-strip.sp-layout-horizontal-md .sp-participant-avatar,
+.scrying-pool.scrying-pool-strip.sp-layout-mosaic-md .sp-participant-avatar {
+  width: 150px;
+  height: 150px;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px 4px 4px;
+  gap: 4px;
+}
+.scrying-pool.scrying-pool-strip.sp-layout-horizontal-md .sp-participant-avatar .sp-avatar__img,
+.scrying-pool.scrying-pool-strip.sp-layout-mosaic-md .sp-participant-avatar .sp-avatar__img {
+  width: 91px;
+  height: 91px;
+  border-radius: 6px;
+  flex-shrink: 0;
+}
+.scrying-pool.scrying-pool-strip.sp-layout-horizontal-md .sp-participant-avatar .sp-avatar__name,
+.scrying-pool.scrying-pool-strip.sp-layout-mosaic-md .sp-participant-avatar .sp-avatar__name {
+  display: block;
+  font-size: 0.65rem;
+  text-align: center;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.scrying-pool.scrying-pool-strip.sp-layout-horizontal-md .sp-participant-avatar .sp-avatar__corner-badge,
+.scrying-pool.scrying-pool-strip.sp-layout-mosaic-md .sp-participant-avatar .sp-avatar__corner-badge {
+  bottom: 4px;
+  right: 4px;
+}
+.scrying-pool.scrying-pool-strip.sp-layout-horizontal-md .sp-participant-avatar::after,
+.scrying-pool.scrying-pool-strip.sp-layout-mosaic-md .sp-participant-avatar::after {
+  display: none;
+}
 .sp-strip__grip {
   width: 100%;
   height: 16px;
@@ -557,8 +620,8 @@
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }
 .sp-strip__toggle {
-  width: 44px;
-  min-width: 44px;
+  width: 83px;
+  min-width: 83px;
   height: 28px;
   display: flex;
   align-items: center;
@@ -614,6 +677,9 @@
   flex-direction: column;
   gap: 4px;
 }
+.sp-strip__participant-item {
+  margin: 0;
+}
 .sp-strip__first-tip {
   font-size: 0.75rem;
   color: var(--sp-text-muted, hsl(0, 0%, 60%));
@@ -622,8 +688,8 @@
 }
 .sp-participant-avatar {
   position: relative;
-  width: 44px;
-  height: 44px;
+  width: 83px;
+  height: 83px;
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -666,6 +732,7 @@
   z-index: 1;
   width: 48px;
   height: 48px;
+  border-radius: 6px;
 }
 .is-expanded .sp-participant-avatar .sp-avatar__name {
   position: absolute;
@@ -701,9 +768,9 @@
   z-index: 1;
 }
 .sp-avatar__img {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+  border-radius: 6px;
   object-fit: cover;
   flex-shrink: 0;
 }
@@ -711,7 +778,7 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-  border-radius: 50%;
+  border-radius: 6px;
   background: hsl(220, 15%, 18%);
 }
 .is-expanded .sp-participant-video__element {
@@ -1171,6 +1238,73 @@
 .scrying-pool.directors-board .directors-board__footer-btn--av-config:hover {
   background: rgba(50, 55, 70, 0.9);
 }
+.scrying-pool.directors-board .directors-board__dock-layout-bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 8px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  flex-shrink: 0;
+  background: rgba(0, 0, 0, 0.12);
+}
+.scrying-pool.directors-board .directors-board__dock-layout-label {
+  font-size: 10px;
+  color: var(--sp-text-muted, hsl(0, 0%, 60%));
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  flex-shrink: 0;
+  margin-right: 2px;
+}
+.scrying-pool.directors-board .directors-board__dock-layout-group {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-wrap: wrap;
+}
+.scrying-pool.directors-board .directors-board__dock-layout-sep {
+  width: 1px;
+  height: 20px;
+  background: rgba(255, 255, 255, 0.12);
+  margin: 0 3px;
+  flex-shrink: 0;
+}
+.scrying-pool.directors-board .directors-board__dock-layout-btn {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+  cursor: pointer;
+  color: var(--sp-text-muted, hsl(0, 0%, 65%));
+  padding: 0;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+.scrying-pool.directors-board .directors-board__dock-layout-btn i {
+  font-size: 10px;
+  pointer-events: none;
+}
+.scrying-pool.directors-board .directors-board__dock-layout-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--sp-text-primary, #dde2e8);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+.scrying-pool.directors-board .directors-board__dock-layout-btn.is-active {
+  background: hsl(200, 50%, 25%);
+  border-color: hsl(200, 55%, 45%);
+  color: hsl(200, 80%, 75%);
+}
+.scrying-pool.directors-board .directors-board__dock-layout-size {
+  font-size: 8px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  pointer-events: none;
+}
 .directors-board__preset-panel {
   background: linear-gradient(160deg, hsl(215, 28%, 13%) 0%, hsl(215, 25%, 10%) 100%);
   border: 1px solid var(--sp-border);