/* The desk page's two slots of the Yacht view's dock on a phone (3d/world/dock.css says why): 0 Activity, 1 Power.
   Same slot sizes as the frame's (the frame is the window's full width, so 100vw matches). */
@media (max-width: 640px) {
  html.yacht3d body.in-room {
    --slot: calc((100vw - 24px) / 7);
    --dock-b: calc(env(safe-area-inset-bottom, 0px) + 56px);
    --dock-h: 50px;
  }
  /* Power: a bolt over its word; its state (on shift, how many started) is in the card and its name. */
  html.yacht3d body.in-room .shift-pill {
    left: calc(12px + var(--slot)); bottom: var(--dock-b); width: var(--slot); height: var(--dock-h); min-height: 0; padding: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
    border: 0; border-radius: 12px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
    color: #e9e3d6; font-size: 0; line-height: 0; -webkit-tap-highlight-color: transparent;
  }
  html.yacht3d body.in-room .shift-pill::before {
    content: ''; display: block; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2.5L5 13.5h6l-1 8 8-11h-6z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2.5L5 13.5h6l-1 8 8-11h-6z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  /* Its hidden words are a flex item of no size: the gap is the word's own margin, or it would count twice. */
  html.yacht3d body.in-room .shift-pill::after { content: 'Power'; margin-top: 4px; font: 600 10px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: 0.01em; }
  html.yacht3d body.in-room .shift-pill, html.yacht3d body.in-room .room-grid.side-folded .side-fold { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); }
  html.yacht3d body.in-room .shift-pill::after, html.yacht3d body.in-room .room-grid.side-folded .side-fold::after { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); }
  html.yacht3d body.in-room .shift-pill.on { color: #e5af4f; }
  html.yacht3d body.in-room .shift-pill:active { background: rgba(255, 255, 255, 0.1); }
  html.yacht3d body.in-room .shift-card { bottom: calc(var(--dock-b) + var(--dock-h) + 10px); }

  /* Activity open: its panel ends above the bar, so the bar stays whole and in reach. */
  html.yacht3d body.in-room .room-grid:not(.side-folded) .room-side { bottom: calc(var(--dock-b) + var(--dock-h) + 8px); }
  /* Activity, folded: its pulse over its word, in slot 0. */
  html.yacht3d body.in-room .room-grid.side-folded .room-side { top: auto; left: 12px; bottom: var(--dock-b); width: var(--slot); }
  html.yacht3d body.in-room .room-grid.side-folded .side-fold,
  html.matrix-on.yacht3d body.in-room .room-grid.side-folded .side-fold {
    width: var(--slot); height: var(--dock-h); margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border: 0; border-radius: 12px; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #e9e3d6; transform: none;
    -webkit-tap-highlight-color: transparent;
  }
  html.yacht3d body.in-room .room-grid.side-folded .side-fold::before { width: 20px; height: 20px; margin: 0; }
  html.yacht3d body.in-room .room-grid.side-folded .side-fold::after { content: 'Activity'; font: 600 10px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: 0.01em; }
  html.yacht3d body.in-room .room-grid.side-folded .side-fold:active { background: rgba(255, 255, 255, 0.1); }
}